Javascript 浏览器如何呈现HTML

我试图创建一个类似于面板的结构。这就是我尝试过的：

---

我很想知道浏览器在解析时是如何呈现HTML的。我们可以看到有三个面板，

面板3

是

面板2

的子面板，位于

面板2

的顶部。而根据要求，

面板2

应位于

面板3

的顶部，并且当我点击面板2中的某个按钮时，面板3应滑到面板2的后面，并在面板2的右侧向前移动。希望我说清楚。请帮忙

这与浏览器渲染无关，是CSS使子对象超出父对象的高度

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

因为您已经固定了父级的高度，但是您已经说过，

#slide

的高度是100%，但是还有另一个子级

#secondp

，即文本节点

面板2

。因此，从技术上讲，

#secondp

的高度为

100%+面板2的高度，因此溢出

要解决此问题，请将文本节点
面板2
放在一个元素内，然后设置该元素的高度（我使用了10%），然后将
#幻灯片的高度调整为
100%-新元素的指定高度

下面是一个例子：


HTML:

您还会注意到，我还将
vertical align:top
添加到
firstp
中，否则它将脱离顶部

此外，我还添加了
框大小：边框框
，以防止边框与父对象重叠。
如果希望面板2位于面板3的顶部，则需要应用类似
z-index:-1

我已经修改了你的，以显示这一工作

根据您的要求，面板3位于面板2的后面，单击时有一个按钮可将面板向右转换。您可以很容易地将其整理好，隐藏整个面板，并执行一些很酷的jQuery操作，以使幻灯片过渡效果更好

请记住，除非你另有说明，否则孩子们通常会出现在父母面前
 简单。当它到达一个结束标记时，它知道它可以呈现其中包含的所有内容。好的..但是为什么不在呈现div的子元素时应该呈现在父div下面呢？我不确定我是否遵循了您的question@RAKESHKUMAR-因为那太傻了。孩子们进入父母内部（暴露出改变这一点的定位规则）。解析和呈现是有点分开的。我认为您的问题是关于呈现而不是解析。对于解析XML，浏览器使用使用堆栈的库。一个打开的标记推送到堆栈，一个关闭的标记弹出dom元素。渲染是一个更复杂的问题这是什么答案？你至少需要一些文字来描述你的改变是什么，以及改变如何回答这个问题。@shaik我想你没有解决这个问题。感谢你的回答，但我的要求没有什么不同。您共享的小提琴无法描述预期的行为。很抱歉伟大的这很有帮助…谢谢：）只是一个提示..当我试图给面板2一个比面板3更高的z索引值时，它就不起作用了。面板3位于面板2的顶部。。看到这个了吗
#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;
}

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

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

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