我是 HTML/CSS 的新手，我一直在努力理解 CSS 的相对/抽象概念。我想要做的是将一个图像堆叠在另一个图像之上。提供的图像显示了我当前的布局与意图:
(链接直接指向图片，需要 10rep 才能发布 <img></img> )
目前: http://s4.postimg.org/vlf4czqul/example.png
期望: http://s28.postimg.org/k3cdvarp9/intentions.png
我目前的代码如下， HTML:
<body style=background:grey">
<div class="main_container">
<img id="rounded_shell" src="shell.png" alt="">
<img id="inner_tab" src="tab_one.png" alt="">
</div>
</body>
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main_container{
position: relative;
border: 1px solid red;
width: 100%;
}
img#rounded_shell{
position: relative;
border: 1px solid blue;
max-width: 40%;
max-height: 40%;
z-index: 0;
}
img#inner_tab{
position: absolute;
right: 5em;
max-height: 40%;
max-width: 40%;
z-index: 1;
}
我有一个主容器可以容纳所有东西，(但我确实觉得它可以被删除，因为 <body> 理论上会取代它)并且我有两个图像，我原以为我会能够设置 img#rounded_shell用position: relative所以当我放入选项卡的图像时，我可以将其设置为 position: absolute并将其定位到其父级的左上角(img#rounded_shell 正确吗？)但它的定位如上所示。我还想让它们作为一个组按比例缩放以进行移动浏览，但我认为这本身就是一个不同的问题。
最佳答案
结束我们在评论中的交流，我将提供一个示例。这个例子都是 HTML/CSS。在我看来，您所做的很多事情不一定是通过 <img> 生成的图像。标签。而不是可以更好地使用各种 CSS 属性，如 border-radius , background-color , background-image等
你说你是 HTML/CSS 的新手，所以我假设这就是你选择图像路径而不是 CSS 路径的原因。
这就是我将如何处理您目前提供的信息:
HTML
<div class="shell">
<div class="row top-row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row bottom-row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS 类为 .row 的 DIV不是完全必要的。它们主要用作 CSS 样式的“ Hook ”并帮助您可视化事物。 .shell的宽度防止超过四个 DIV 连续出现，因此如果我们用 .row 删除 DIV，最后四个将出现在前四个下方CSS 类。
CSS
.shell {
background-color: #eee;
border: 1px solid black;
border-radius: 18px;
width: 200px;
height: 200px;
padding: 10px;
}
.shel > .row {
overflow: auto; /* clearfix */
}
.shell > .row > div {
background-color: #ccc;
box-sizing: border-box; /* so width/height include border, padding, margin */
width: 50px;
height: 100px;
float: left;
}
.top-row > div,
.bottom-row > div {
border: 1px solid black;
border-right: 0;
}
.top-row > div:nth-child(1) {
border-top-left-radius: 15px;
}
.top-row > div:nth-child(4) {
border-top-right-radius: 15px;
border-right: 1px solid black;
}
.bottom-row > div {
border-top: 0;
}
.bottom-row > div:nth-child(1) {
border-bottom-left-radius: 15px;
}
.bottom-row > div:nth-child(4) {
border-bottom-right-radius: 15px;
border-right: 1px solid black;
}
在上面的 CSS 中我使用了 border-radius创建弯 Angular 和background-color为 DIV 提供填充颜色。然后，我通过 nth-child() 在适当的情况下为各个 DIV 及其边框设置应用了选择规则。伪选择器。 nth-child()在 IE9+ 中受支持，不确定是否重要。
您提到您的shell 的内容将表现得像按钮。我不知道单击时会发生什么，所以最终可能必须更改某些元素，即 <div>至 <a> ，或者需要合并一些 JavaScript。目前，我的回答是一个基本示例，很可能需要您采取额外的步骤才能使其发挥作用。
这是我的 jsFiddle 的链接:http://jsfiddle.net/664rLdwd/1/ .
关于html - 将图像堆叠到父图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28586715/