Как браузер отображает HTML

Question

Я пытаюсь создать структуру, похожую на панели. Это то, что я пробовал: FIDDLE

<div id='main'> 
    <div id='firstp'>Panel 1</div> 
    <div id='secondp'>Panel 2 
     <div id='slide'>Panel 3</div> 
    </div> 
</div> 

и CSS является

#main{ 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
} 
#firstp{ 
    width: 20%; 
    height: 100%; 
    border: 1px solid blue; 
    display: inline-block; 
} 
#secondp{ 
    width: 20%; 
    height: 100%; 
    border: 1px solid red; 
    display: inline-block; 
    position: relative; 
    background-color: red; 
} 
#slide{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    border: 1px solid green; 
    background-color: green; 
} 

Я хотел бы знать, как браузер отображает HTML при разборе. Как мы видим, есть три панели: Panel 3 является дочерним по отношению к Panel 2, видно сверху Panel 2. Принимая во внимание, что по требованию Panel 2 должен быть сверху Panel 3 и говорить, когда я нажимаю какую-либо кнопку на панели 2, панель 3 должна скользить за панель 2 и поступать вправо на правой стороне панели 2. Надеюсь, я сделал себе ясность. Пожалуйста помоги.

Answer 1

Если вы хотите, чтобы панель 2 была сверху панели 3, вам необходимо применить что-то вроде z-index:-1;.

Я изменил ваш fiddle, чтобы показать эту работу.

Панель 3 находится за панелью 2 по мере того, как вы просили, и есть кнопка, которая при нажатии преобразует панель вправо. Вы можете легко скрыть это, чтобы скрыть всю панель и сделать некоторые классные вещи jQuery, чтобы сделать слайд-переход приятнее.

Просто старайтесь помнить, что если вы не скажете иначе, дети обычно появятся перед их родителями.

Answer 2

#main{ 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
} 
#main>div{ 
    width: 20%; 
    height: 100%; 
    border: 1px solid blue; 
    display: inline-block; 
} 
#main>div{ 
    width: 20%; 
    height: 100%; 
    border: 1px solid red; 
    display: inline-block; 
    position: relative; 
    background-color: red; 
} 
#slide{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    border: 1px solid green; 
    background-color: green; 
} 

Answer 3

Речь идет не об рендеринге браузера, а в том, что ваш CSS делает детей выше высоты родителя.

Поскольку вы исправили высоту родителя, но вы сказали, что #slide в высоту 100%, но есть еще один ребенок #secondp, который является текстовым узлом Panel 2. Так технически, #secondp имеет высоту 100% + height of Panel 2, следовательно, переполнение.

Чтобы исправить это, поместите текстовый узел Panel 2 внутри элемента, а затем установить высоту этого элемента (я использовал 10%), а затем отрегулировать высоту #slide быть 100% - specified height of the new element.

Вот пример:

Fiddle

HTML:

<div id='main'> 
    <div id='firstp'>Panel 1</div> 
    <div id='secondp'> 
     <div id="slide1">Panel 2</div> 
     <div id='slide'>Panel 3</div> 
    </div> 
</div> 

CSS:

#main{ 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
} 

#firstp{ 
    width: 20%; 
    height: 100%; 
    border: 1px solid blue; 
    display: inline-block; 
    vertical-align: top; 
    box-sizing: border-box; 
} 

#secondp{ 
    width: 20%; 
    height: 100%; 
    border: 1px solid red; 
    display: inline-block; 
    position: relative; 
    background-color: red; 
    box-sizing: border-box; 
} 

#slide{ 
    width: 100%; 
    height: 90%; 
    position: relative; 
    border: 1px solid green; 
    background-color: green; 
    box-sizing: border-box; 
} 

#slide1 { 
    height: 10%; 
} 

Вы также заметите, что я добавил vertical-align: top к firstp Aswell, в противном случае это будет не так.

Кроме того, я добавил box-sizing: border-box, чтобы предотвратить пересечение границы с родителем.