Question

是否有可能在没有背景且没有绝对位置的情况下将一个div放在另一个div上？这是一种简化的响应式设计。内容将改变宽度为％。所以在这种情况下，我认为我不能使用绝对定位？有没有办法把div翻译成其他人？

这里我使用相对定位，但z-index似乎不起作用。我不明白为什么？

CSS：

#content{
    margin:0 auto;
    width:40%;
    overflow:hidden; /* a way of clearing float */
    text-align:center;
}

#text{
    margin:0 auto;
    text-align:justify;
}

#menuTrans{
    position:relative;
    margin:0 auto;
    z-index:1;
    display:inline-block;
}
#blueTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    z-index:0;
    background:blue;
}
#redTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    z-index:0;
    background:red;
}



#menu{
    margin:0 auto;
    z-index:0;
    display:inline-block;
}
#blue{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:blue;
}
#red{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:red;
}

HTML：

<div id="content">
    <div id="text"> 
        some text some text some text  
        some text some text some text
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
    </div>   
    <div id="menu"> 
        <div id="red"> </div>
        <div id="blue"> </div>
    </div>

    <div id="menuTrans"> 
        <div id="redTrans"> </div>
        <div id="blueTrans"> </div>
    </div>
</div>

Answer 1

如果你知道元素的宽度，你可以给它们一个负余量。稍后在DOM中出现的元素将位于顶部。

#blueTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    background:blue;
    margin-left: -50px;
}
#redTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    background:red;
    margin-left: -50px;
}

http://jsfiddle.net/WMXMW/2/

Answer 2

您需要将元素移动到您想要的位置。如果您使用相对位置，可以通过设置左负值来执行此操作：

#menuTrans{
  position:relative;
  left: -100px;
[...]

要控制哪一个在顶部，你需要给#menu一个相对位置 - 或者除了 static 之外的任何其他位置 - 所以z-index将起作用。< / p>

没有绝对，没有背景

2 个答案: