写点什么

CSS 文档中定位指南:static、relative、absolute、fixed、sticky

用户头像
devpoint
关注
发布于: 4 小时前
CSS 文档中定位指南:static、relative、absolute、fixed、sticky

CSS 中 position 属性用于指定元素的定位方法的类型(staticrelativeabsolutefixedsticky)。


静态定位 position: static

此属性未 HTML 元素默认定位,一个元素没有以任何特殊的方式定位,它总是按照页面的正常流程定位。


在此属性下,属性值 topleftrightbottomz-index 对 HTML 元素没有影响。


<div class="parent">    <div class="child"></div></div><div class="sibling"></div><style type="text/css">    .parent {        width: 480px;        height: 320px;        background-color: #008800;    }    .child {        width: 240px;        height: 160px;        background-color: #ff0000;    }    .sibling {        width: 240px;        height: 160px;        background-color: #0000ff;    }</style>
复制代码


效果如图:



为什么使用它呢?将元素设置为 position: static 的唯一原因是强制删除应用于无法控制的元素上的某些定位。

相对定位 position: relative

此属性相对于其正常位置的,在不改变布局的情况下根据元素的当前位置定位元素。


position: relative 相对于它的当前位置放置一个元素而不改变它周围的布局。


在此属性下,设置相对定位元素的 toprightbottomleft 属性会导致它被调整到远离其正常位置。


<div class="parent">    <div class="child"></div></div><div class="sibling"></div><style type="text/css">    .parent {        position: relative;        width: 480px;        height: 320px;        background-color: #008800;        z-index: 5;        left: 50px;        top: 50px;    }    .child {        width: 240px;        height: 160px;        background-color: #ff0000;    }    .sibling {        width: 240px;        height: 160px;        background-color: #0000ff;    }</style>
复制代码


效果如图:



为什么要使用它?此属性下引入了在该元素上使用 z-index 的能力,这对于静态定位 position: static 的元素并不真正起作用。

绝对定位 position: absolute

此属性是相对于最近父级元素的位置,如果绝对定位元素没有定位的父级元素,它将使用文档 body 并随着页面滚动而移动。position: absolute 相对于其父元素的位置放置一个元素并改变它周围的布局。


关于绝对定位的权衡是,这些元素将从页面的元素流中删除,具有这种定位类型的元素不受其它元素的影响,也不影响其它元素。


<div class="parent">    <div class="child"></div></div><div class="sibling"></div><style type="text/css">    .parent {        position: relative;        width: 480px;        height: 320px;        background-color: #008800;    }    .child {        position: absolute;        width: 240px;        height: 160px;        background-color: #ff0000;        left: 20px;        top: 20px;        z-index: 2;    }    .sibling {        position: absolute;        width: 240px;        height: 160px;        left: 100px;        top: 100px;        background-color: #0000ff;        z-index: 1;    }</style>
复制代码


效果如图:



在此属性下,同一父级元素中,z-index 值大的在最上层。


绝对定位元素是相对于最近定位的祖先来定位自身。一旦它找到一个已定位的祖先,该祖先之上的元素的位置就不再相关。



相对定位和绝对定位的主要区别在于,position: absolute 会将子元素完全脱离文档的正常流程,并且该子元素将相对于具有自己的位置集的第一个父元素进行定位。

固定定位 position: fixed

相对于视窗定位,即使页面滚动,也始终停留在同一位置上。固定定位元素不会在其所在的页面中留下间隙,其他元素会填补缺失的地方。


<div class="parent">    <div class="child"></div></div><div class="sibling"></div><style type="text/css">    .parent {        position: relative;        width: 480px;        height: 320px;        background-color: #008800;    }    .child {        width: 240px;        height: 160px;        background-color: #ff0000;        left: 20px;        top: 20px;        z-index: 2;    }    .sibling {        position: fixed;        width: 240px;        height: 160px;        right: 50px;        bottom: 50px;        background-color: #0000ff;        z-index: 1;    }</style>
复制代码


效果如图:


粘性定位 position: sticky

基于用户的滚动位置定位,根据滚动位置在 relativefixed 之间切换。相对定位,直到在视窗中遇到给定的偏移位置,然后它固定到位, 就像 position: fixed 一样。


position:sticky 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于toprightbottomleft 的值进行偏移,偏移值不会影响任何其他元素的位置。


关于粘性定位的应用场景,可以参阅《CSS实战 | 磁性页头和页脚的表格制作》。

发布于: 4 小时前阅读数: 3
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
CSS 文档中定位指南:static、relative、absolute、fixed、sticky