Question

我是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>理论上会取而代之）并且我有两个图像，我曾经想过我＆＃ 39; d能够使用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>

CSS类.row的DIV并非完全必要。他们主要在那里扮演＆＃34;钩子＆＃34;用于CSS样式并帮助您可视化事物。 .shell的宽度可防止连续出现四个以上的DIV，因此如果我们使用.row CSS类删除了DIV，则后四个DIV会出现在前四个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()伪选择器在适当的情况下为单个DIV及其边框设置应用选择规则。 IE9 +支持nth-child()，不确定是否重要。

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

以下是我的jsFiddle的链接：http://jsfiddle.net/664rLdwd/1/。

将图像堆叠到父图像？

2 个答案: