根据CSS区分html中的移动和固定DIV
Distinguishing the moving and fixed DIVs in html based on CSS
我正在学习一些前端开发并遇到了 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>
both divs 有 absolute 定位但第一个或固定 div
有定位顶部定义为`
我看到的唯一区别是第一个或固定为
top: 80px \for fixed div
虽然是
bottom: 100px \for the moving div
我的问题是,为什么只有 css 中的 bottom 属性将此 div 放在另一层中,而 top 对固定的 div 不做同样的事情?或许还有其他原因?
绝对定位取决于其父元素。如果 div 嵌套在另一个 div 中,除了静态(默认)以外的任何定位,那么它将绝对显示到那个 div 而不是正文或页面。我不确定 "layering" 是什么意思。如果你想分层 divs 你可以使用 z-index 把一个放在另一个上面。
编辑:
浏览器的左上角始终保持在 0,0 调整大小时唯一改变的是右下角坐标
我正在学习一些前端开发并遇到了 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>
both divs 有 absolute 定位但第一个或固定 div
有定位顶部定义为`
我看到的唯一区别是第一个或固定为
top: 80px \for fixed div
虽然是
bottom: 100px \for the moving div
我的问题是,为什么只有 css 中的 bottom 属性将此 div 放在另一层中,而 top 对固定的 div 不做同样的事情?或许还有其他原因?
绝对定位取决于其父元素。如果 div 嵌套在另一个 div 中,除了静态(默认)以外的任何定位,那么它将绝对显示到那个 div 而不是正文或页面。我不确定 "layering" 是什么意思。如果你想分层 divs 你可以使用 z-index 把一个放在另一个上面。
编辑: 浏览器的左上角始终保持在 0,0 调整大小时唯一改变的是右下角坐标