我在滚动时创建了一个具有固定标题的页面。由于有一定的边界特性,它工作正常。
永久屏幕标题 - 工作原理
该页面有两个标题,一个用于页面未滚动,另一个用于滚动页面,我将它们分别作为pageheader和screenheader给出了它们。
CSS中的默认框模型更改为border-box,并使用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
第一层是z-index堆栈中的上层和页面上最顶层的内容。该图层包含标题和顶线。中间层包含screenheader。它始终位于屏幕的最顶部(位置:固定),并位于页眉头下方的z-index图层上。下层包含主要内容,后跟页脚。
首先,您无法看到固定的屏幕阅读器,它被上层页眉层隐藏。滚动不会影响屏幕阅读器,因此当您将页眉滚动到屏幕外时它会变得可见。
页面内容也将滚出屏幕,但在z-index堆栈的screenheader下。这样,您将始终在页面或屏幕上显示标题。
怎么来?
代码中奇怪而棘手的部分在于pageheader上的border属性。如果你拿走它,整个想法都会被打破。
屏幕阅读器将在上方可见 - 未被 - 页面阅读器覆盖,并且,这非常棘手,屏幕阅读器的父级,包装器将被放置在其屏幕播放器子项之后!此外,h1标签似乎在内容div中失去了垂直边距。
这就是我的问题,为什么会这样?
上看到演示