Как я могу иметь несколько стека Div друг на друга, используя Float, а не абсолютное позиционирование?

Question

Я переписываю все и отдаляюсь от абсолютных позиций и вместо этого использую поплавки, чтобы расположить вещи так, как я хочу.

Вопрос теперь в том, как мне поместить несколько div друг на друга?Пользователь сможет каким-то образом переключаться между этими элементами.

Спасибо

Редактировать: причина, по которой я ухожу из абсолютной позиции, заключается в том, что я хочу, чтобы мой div все еще был дочерним по отношению к родителю.то есть, если мой div расширяется, я хочу, чтобы родительский div тоже расширялся.

Answer 1

float не перекрывается с другими плавающими объектами в том же контейнере. См. здесь для примера трех последовательных плавающих объектов, чтобы увидеть, как они не перекрываются.

Если вы хотите, чтобы объекты перекрывались, вам нужно / нужно использовать абсолютное позиционирование. Вы можете использовать позиционирование относительно родительского объекта, установив для родителя значение position:relative;, а для потомка - position: absolute;. См. здесь для примера перекрывающихся объектов с абсолютным позиционированием относительно родителя.

Если вы пытаетесь одновременно отображать только один из этих объектов, просто установите неотображаемые объекты на 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

Я не понимаю, как заставить пользователей переключаться между DIV без использования JavaScript.

Возможно, оставьте первый div со статической компоновкой по умолчанию и не отображайте ни один для остальных. Используйте JavaScript, чтобы показывать только один div одновременно.

Answer 4

Вы можете использовать float: left;, но лично мне проще использовать display: inline-block;.