将图像堆叠到父图像？

Question

我是 HTML/CSS 的新手，我一直在努力理解 CSS 的 relative/abstract 概念。我想要做的是将一个图像堆叠在另一个图像之上。提供的图像显示了我当前的布局与意图：（直接链接到图片，需要 10rep 到 post <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 正确吗？）但它的位置如上所示。我还想让它们作为一个组按比例缩放以进行移动浏览，但我假设这本身就是一个不同的问题。

Answer 1

absolute 元素应该是 relative 的子元素。将图像设置为 div 的 background-image 或用包装纸包裹背面图像并包裹正面图像。

Answer 2

结束我们在评论中的交流，我将提供一个例子。这个例子都是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>

.row CSS class 的 DIV 不是完全必要的。它们的主要作用是充当 "hooks" 的 CSS 造型，并帮助您形象化。 .shell 的宽度可防止超过四个 DIV 出现在一行中，因此如果我们使用 .row CSS class 删除 DIV，则后四个将显示在前四个下方。

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 创建弯曲的角，并使用 background-color 为 DIV 提供填充颜色。然后，我通过 nth-child() 伪 selector 在适当的情况下为各个 DIV 及其边框设置应用了 select 规则。 nth-child() 在 IE9+ 中受支持，不确定是否重要。

您提到 shell 的内容将像按钮一样工作。我不知道单击一个元素时会发生什么，因此最终可能必须更改某些元素，即 <div> 到 <a>，或者某些 JavaScript 需要更改合并。在这一点上，我的回答是一个基本的例子，很可能需要你采取额外的步骤才能让它发挥作用。

这是我的 jsFiddle 的 link：http://jsfiddle.net/664rLdwd/1/。

将图像堆叠到父图像？

Stacking image to parent image?

html

css

image