html - 基于CSS区分html中的移动和固定DIV

Question

我正在学习一些前端开发并遇到了 this webpage example

这是一个简单的网页，主体完全由 divs

下面这个是一个固定的 div，当我说固定的时候我的意思是当我从底部或左边调整浏览器的大小时，右边的 div 没有调整并且它消失了。

<div style="background-color: #292929; color: white; position: absolute; left: 0px; top: 80px; width: 100px; height: 300px; padding: 5px; padding-right: 20px;">This will be the navigation 'column', which will run down the left of the page.</div>

当下面的那个在移动的时候

<div style="position: absolute; left: 10px; bottom: 100px; background-color: #0099CC; padding: 5px; color: white; border: 5px white groove; font-size: 13pt;">I could go on, but I think you see the brilliance of these things.</div>

两个 div 都具有绝对 定位，但第一个或固定的div 的顶部定位定义为`我看到的唯一区别是 first 或 fixed as

top: 80px  \\for fixed div

当它是

bottom: 100px \\for the moving div

我的问题是，为什么这个 div 的 css 中只有 bottom 属性将它放在另一层中，而 top 对固定的 div 却没有这样做？还是另有原因？

Answer 1

绝对定位依赖于它的父元素。如果 div 嵌套在另一个 div 中，除了静态(默认)之外还有任何定位，那么它将绝对显示到该 div 而不是正文或页面。我不确定你所说的“分层”是什么意思。如果你想对 div 进行分层，你可以使用 z-index 将一个放在另一个之上。

编辑:浏览器的左上角始终保持在 0,0 调整大小时唯一改变的是右下角的坐标