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

Question

I'm rewriting everything and moving away from absolute positions and instead using floats to position things the way I want them.

The question now is how can I float multiple divs on top of each other? The user will be able to switch between these divs somehow.

Thanks

Edit: The reason I'm moving away from absolute position is that I want my div to still be a child of its parent. ie if my div gets extended I want the parent div to get extended also.

Answer 1

float does not overlap with other floated objects in the same container. See here for an example of three successive floated objects to see how they don't overlap.

If you want objects to overlap, you will want/need to use absolute positioning. You can use positioning relative to the parent object by setting the parent to position:relative; and the child to position: absolute; . See here for an example of overlaping objects with absolute positioning relative to the parent.

If, you're trying to only have one of these objects actually display at a time, then just set the non-displayed objects to display: none and they will take no space in the page layout. You won't need to use float or absolute positioning.

Answer 2

I'm inexperienced in CSS selectors, but I'm sure you can find something that works better than naming each class specifically:

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

I don't see how you are going to have users switch between the DIVs without using JavaScript.

Perhaps, leave the first div with the default static layout and display none for the others. Use JavaScript to show only one div at a time.

Answer 4

You can use float: left; , but personally I find it easier to use display: inline-block; instead.