如何使用Float而不是绝对定位将多个Div堆叠在一起？

Question

我正在重写所有内容并远离绝对位置，而是使用浮动来按照我想要的方式定位事物。

现在的问题是如何将多个div叠加在一起？用户将能够以某种方式在这些div之间切换。

由于

编辑：我离开绝对位置的原因是我希望我的div仍然是其父母的孩子。即如果我的div被扩展，我希望父div也得到扩展。

Answer 1

float不与同一容器中的其他浮动对象重叠。有关三个连续浮动对象的示例，请参阅here以了解它们如何不重叠。

如果希望对象重叠，则需要/需要使用绝对定位。通过将父级设置为position:relative;，将子级设置为position: absolute;，可以使用相对于父对象的定位。有关使用相对于父级的绝对定位重叠对象的示例，请参阅here。

如果您尝试一次仅实际显示其中一个对象，则只需将未显示的对象设置为display: none，它们将不会在页面布局中占用任何空间。您不需要使用浮动或绝对定位。

Answer 2

我对CSS选择器缺乏经验，但我确信你能找到比专门命名每个类更好的东西：

http://jsfiddle.net/aJqb2/

HTML：

<div class="over1"></div>
<div class="over2"></div>
<div class="over3"></div>

CSS：

div{
    height:50px;
    width:150px;

    float:left;
}
.over1{
    background-color:blue;
}
.over2{
    margin-top:10px;
    margin-left:-10px;
    background-color:green;
}
.over3{
    margin-top:20px;
    margin-left:-10px;
    background-color:orange;
}

Answer 3

我不知道如何让用户在不使用JavaScript的情况下在DIV之间切换。

也许，将第一个div保留为默认静态布局，并为其他布局显示none。使用JavaScript一次只显示一个div。

Answer 4

您可以使用float: left;，但我个人觉得更容易使用display: inline-block;。