我是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_shellposition: relative,因此当我在标签页中添加图片时,可以将其设置为position: absolute并将其放置在其父级的左上角(即img#rounded_shell正确吗?),但它的位置如上所述。我也想让它们按比例成组地进行移动浏览,但是我想这本身就是一个不同的问题。

最佳答案

在评论中进行交流,我将提供一个示例。此示例是所有HTML / CSS。在我看来,您正在做的许多事情不一定都是通过<img>标记生成的图像。不能更好地使用各种CSS属性,例如border-radiusbackground-colorbackground-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样式的“挂钩”,并帮助您可视化事物。 .shell的宽度可防止连续出现四个以上的DIV,因此,如果我们使用.row CSS类删除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(),不确定是否重要。

您提到了外壳程序的内容将像按钮一样。我不知道单击某个按钮后会发生什么情况,因此最终可能需要更改某些元素,即<div><a>,或者需要合并一些JavaScript。在这一点上,我的回答是一个基本示例,很可能需要您采取其他步骤才能使其正常工作。

这是我的jsFiddle的链接:http://jsfiddle.net/664rLdwd/1/

10-05 20:48
查看更多