子标签';的CSS属性会对父标记产生重大影响

子标签';的CSS属性会对父标记产生重大影响,css,Css,我已经创建了一个页面,当它滚动时有一个固定的标题。由于某种边界属性,它运行良好 永久屏幕标题-工作原理 该页面有两个标题,一个用于未滚动的页面,另一个用于已滚动的页面,我分别将它们的ID设置为pageheader和screenheader CSS中的默认框模型更改为边框框,标题和主要内容使用position和z-index元素进行布局 该页面有3层。标题位于上面两层中。底部的第三层包含主要内容和页脚 1____ __ Pageheader with title and

我已经创建了一个页面,当它滚动时有一个固定的标题。由于某种边界属性,它运行良好

永久屏幕标题-工作原理

该页面有两个标题,一个用于未滚动的页面,另一个用于已滚动的页面,我分别将它们的ID设置为pageheader和screenheader

CSS中的默认框模型更改为边框框,标题和主要内容使用position和z-index元素进行布局

该页面有3层。标题位于上面两层中。底部的第三层包含主要内容和页脚

1____ __ Pageheader with title and topline (z-index: 2) - scrollable 2__ Topline (z-index: 1) - not scrollable 3 ___________ __ The main content and the footer (z-index: unspecified, that is 0) - scrollable 1_____________________ 2_uu_uuu顶行(z索引:1)-不可滚动 3-主要内容和页脚(z-index:unspecified,即0)-可滚动 第一层是z索引堆栈中的上层,是页面上最顶层的内容。该层包含标题和背线。中间层包含屏幕标题。这总是放在屏幕的最上面(位置:固定),以及页面标题下的z索引层。下层包含主要内容,后跟页脚

首先,你看不到固定的屏幕标题,它被上面的页面标题层隐藏。滚动不会影响屏幕页眉,因此当您将页面页眉从屏幕中滚动出来时,它将变得可见

页面内容也将从屏幕中滚出,但在z索引堆栈的屏幕标题下。这样,您将始终在页面或屏幕上显示标题

怎么回事?

代码中奇怪而棘手的部分存在于pageheader的border属性中。如果你把它拿走,整个想法就破灭了

screenheader将在页面标题上方可见,而不是被页面标题覆盖,而且,这非常棘手,screenheader的父级包装器将放在其screenheader子级之后!此外,h1标记似乎在content div中失去了垂直边距

这就是我的问题,为什么

可以在上看到演示