CSS 定位：3 个 div 相互重叠

Question

情况是这样的：

我有一个主要的 div 和 2 个 div 部分（红色和橙色），两者都有宽度：100% 和高度：90%。（应该有反应！）

在红色 div 内有一个导航栏（右上角粉红色），中间有 3 个按钮。

浅绿色 div 必须在红色和橙色 div 之上。

放置所有东西的正确方法是什么？

在红色和橙色 divs 上使用 relative 不起作用，因为高度中有“%”。

<div class="main">
    <div class="thedude"></div>
    <div class="first">
            <ul>
                <li> <a href="#"> Clients </a> </li>
                <li> <a href="#"> About Us </a> </li>
                <li> <a href="#"> Contact </a> </li>
                <li class="hasImage"><a href="#"> <img src="logo.png"> </a></li>
            </ul>
            <div class="timages">
                <a href="#"><img src="icon1.png"></a>
                <a href="#"><img src="icon2.png"></a>
                <a href="#"><img src="icon3.png"></a>
            </div>
    </div>

    <div class="second">

    </div>

</div>




*{
    margin: 0;
    padding: 0;
}

body{
    font-size: 100%; 
    font-family: arial;
}

.first{
    width: 100%; 
    height: 90%;
    background-color: #2acecd;
}

.thedude{
    width: 95em;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    background-image: url('yellow_creature.png');
    background-repeat: no-repeat;
    background-size: 100%, 100%;
    z-index: 500;
}

.second{
    width: 100%; 
    height: 90%;
    background-color: #f49900;
}

.third{
    width: 100%;
    height: 90%;
    background-color: #fbc00a;
}

.timages{
    margin:0 auto;
    width: 81%;
    padding-top: 23%;
    text-align: center;
    max-width: 62%;
}

.timages img{
    text-align: center;
    max-width: 100%;
}

ul{
    z-index: 540;
    position: absolute;
    right: 0;
    text-transform: uppercase;
}

li{
    float: left;
    padding: 2em 0.5em;
}

li a{
    text-decoration: none;
    color: white;
}

li img{
    max-width: 10em;
}

.hasImage{
    padding: 0.6em 0.5em;
}

http://jsfiddle.net/4z55sjn0/

Answer 1

你的 HTML 结构是主要问题。

HTML

<div class="main">
    <div class="thedude">
    <div class="first">

    </div>

    <div class="second">
            <ul>
                <li> <a href="#"> Clients </a> </li>
                <li> <a href="#"> About Us </a> </li>
                <li> <a href="#"> Contact </a> </li>
                <li class="hasImage"><a href="#"> <img src="logo.png"/> </a></li>
            </ul>
            <div class="timages">
                <a href="#"><img src="icon1.png"/></a>
                <a href="#"><img src="icon2.png"/></a>
                <a href="#"><img src="icon3.png"/></a>
            </div>
    </div>

    <div class="third">

    </div>
</div>
</div>

如果您想要橙色菜单 div，您需要将其移动...到橙色方块内！

CSS

    .first {
    width: 30%;
    height: 90%;
    background-color: #2acecd;
    float:left;
    position:absolute;
    top:5%;
    z-index: 999 !important;
}
.thedude {
    width: 95em;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    background-image: url('yellow_creature.png');
    background-repeat: no-repeat;
    background-size: 100%, 100%;
    z-index: 500;
}
.second {
    width: 100%;
    height: 90%;
    background-color: #f49900;
    position:relative;
}
.third {
    width: 100%;
    height: 90%;
    background-color: #fbc00a;
}
.timages {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
}
.timages img {
    text-align: center;
    max-width: 100%;
}
ul {
    z-index: 540;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    list-style: none;
}
li {
    float: left;
    padding: 2em 0.5em;
}
li a {
    text-decoration: none;
    color: white;
}
li img {
    max-width: 10em;
}
.hasImage {
    padding: 0.6em 0.5em;
}

勾选the updated fiddle。这接近你想要的吗？

更新（在对此答案的评论之后）

我已经调换了样式以消除误解。

检查updated fiddle。

希望对您有所帮助。

CSS 定位：3 个 div 相互重叠

CSS positioning: 3 divs on each other

html

css

responsive-design