如何使用浮动而不是绝对定位使多个 Div 叠放在一起？

Question

我正在重写一切，并摆脱绝对定位，改用浮动来定位我想要的东西。

现在的问题是如何将多个div浮动在彼此之上？用户将能够以某种方式在这些div之间切换。

谢谢。

编辑：我放弃使用绝对定位的原因是我希望我的div仍然是其父div的子元素。也就是说，如果我的div被扩展了，我希望父div也会被扩展。

- Roozbeh15

---

你的意思是重叠吗？对于第一个元素之后的元素，您可以使用负的margin-left... - mowwwalker

如果“在顶部”意味着“重叠”，并且用户以某种方式在div之间切换，以便一次只有一个实际可见，那么您是否只需将除当前之外的所有内容设置为display:none？ - nnnnnn

你的回答非常清晰明了。用户一次只能看到一个div，如果我将display从none更改为block，反之亦然，我的问题就解决了。如果你把这个作为答案，我会接受它。 - Roozbeh15

父级div不考虑子浮动元素，请参见此处：http://jsfiddle.net/4JgSE/ - henryaaron

Answer 1

浮动元素不会与同一容器中的其他浮动对象重叠。点击这里查看三个连续浮动对象的示例，了解它们如何不重叠。

如果要让对象重叠，您需要使用绝对定位。您可以通过将父级设置为position:relative;并将子级设置为position:absolute;来相对于父级对象进行定位。点击这里查看相对于父级使用绝对定位的重叠对象示例。

如果您只想在某个时刻显示其中一个对象，则只需将未显示的对象设置为display:none，它们将不占据页面布局中的任何空间。您无需使用浮动或绝对定位。

- jfriend00

---

我不想使用position: absolute;的原因是我希望div仍然是其父元素的子元素；即如果我的div大小扩展，我也希望父div扩展。 - Roozbeh15

@Roozbeh15 - 如果您在问题中描述了您真正要解决的实际问题，那么也许您可以得到真正问题的答案。我建议您现在编辑您的问题，以描述您真正想要做什么。 - jfriend00

@Roozbeh15 - 在我的答案中添加了一个选项，用于处理不可见对象的 display: none。 - jfriend00

我完全理解你的观点。但是，我并不认为为了回答一个小问题就必须要看全局。虽然如此，在我的未来提问中我会更加仔细地解释所有相关部分。无论如何，感谢你的帮助！ - Roozbeh15

@Roozbeh15，我刚看到这个，想感谢你一直保持如此文明和真诚的态度。你是社区的财富！ - MojoFilter

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;
}

- mowwwalker

Answer 3

我不认为你能在不使用JavaScript的情况下让用户在DIV之间切换。也许，保留第一个DIV的默认静态布局，并对其他DIV使用display none属性进行隐藏。然后使用JavaScript一次只显示一个DIV。

- yas

Answer 4

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

- Niet the Dark Absol

---

浮动对象不会与同一容器中的其他浮动对象重叠。请参见此处的示例，其中显示了一行中的三个浮动对象。 - jfriend00