CSS属性 Position的几种定位方式
作者:
WangMin
格言:努力做好自己喜欢的每一件事
在讲几种定位方式之前,我们先来了解一下什么是普通文档流(normal flow)?
前面讲过浮动会让元素脱离文档流,如果不设置浮动所有元素都处于普通文档流中。普通文档流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到;行内元素在一行中水平排列。
1|0position 属性的作用
position
用于定位盒子对象,有时一个布局中的某些元素,不易用css 中的 padding
、 margin
进行位置排列,这个时候我们就可以使用 position
定位来设置。特别是一个盒子里几个小盒子不规律的布局,这个时候我们使用 position
定位非常方便布局元素。
position
属性用来指定一个元素在网页上的位置,一共有5种定位方式,也就是说 position
属性主要有五个属性值。如下:
属性值 | 含义 |
---|---|
static | 默认值 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
sticky | 粘性定位 |
元素可以使用的顶部(top),底部 (bottom),左侧 (left),右侧 (right)及 z-index 属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
2|0position:static
static
是 position
属性的默认值。如果省略 position
属性,浏览器就认为该元素是 static
定位。
这时,浏览器会按照代码的顺序,决定每个元素的位置,这称为"正常的文档流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。
注意,static定位所导致的元素位置,是浏览器自主决定的,所以这时top、bottom、left、right、 z-index这五个属性无效。
3|0position:relative
相对定位的偏移参考元素是元素本身原来的位置,不会使元素脱离文档流。设置了相对定位的元素不管它是否进行移动,元素仍然占据它原来的位置。移动元素会导致它覆盖其他的元素。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级。它必须搭配top、bottom、left、right这四个属性使用,用来设置偏移的方向和距离。例子如下:
没有使用position:relative时:
使用position:relative时:
我们使用了 top:10px 和 left:10px 将 one元素进行了调整,通过上图就会发现这两个10px并不属于盒子模型,他只是用定位将 one元素进行了位置调整。上面代码中,div元素从默认位置向下偏移10px(即距离顶部10px),向右偏移10排序(即距离左边10px)。
3|1相对定位的特点
1、不会脱离文档流,元素位置的变化,不会对任何元素产生影响。
2、定位元素的层级比普通元素要高,无论什么定位,显示的层级关系都是一样的。
3、left 和 right 不能一起设置,top 和 bottom 不能一起设置。
4、相对定位的元素,也能继续浮动,但不推荐相对定位和浮动一起使用。
5、相对定位的元素,也能设置margin调整元素位置,但不推荐相对定位和margin一起使用。
4|0position:absolute
它有一个重要的限制条件:相对于已定位的最近的父元素,如果没有设置 相对定位的的父元素,那么它的位置就相对于最初的包含元素(比如body)。另外,absolute定位也必须搭配top、bottom、left、right这四个属性使用。
绝对定位的元素会脱离普通流,其实它的效果跟浮动是同样的,都会飘起来覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些元素的排列顺序。
未给父级元素 .box
添加相对定位,给 .two
元素设置绝对定位例子如下:
以上例子可以看出由于未给父级元素 .box
添加相对定位,给 .two
元素设置绝对定位,使的 .two
脱离了普通流,原来的位置没有保留,而且将 .one
覆盖,并对文档的根元素进行了绝对定位,定位于距离文档根元素顶部20px,左侧20px的位置。
给父级元素 .box
添加相对定位,然后再给 .two
元素设置绝对定位例子如下:
以上例子可以看出 .two
元素相对于父元素 .box
进行了绝对定位,使的 .two
脱离了普通流,原来的位置没有保留,还将 .one
覆盖,并且 .two
元素定位于距离父元素 .box
顶部20px,左侧20px的位置。
从以上例子中可以得出一个结论,如果想要子元素定位于父元素的某个位置,必须给父元素设置一个相对定位 position:relative
,才能使子元素出现在父元素的正确位置。
4|1绝对定位的特点
1、绝对定位的元素会脱离文档流,会对后面的兄弟元素和父元素有影响。
2、跟相对定位是一样的,left和right不能一起设置,top和bottom不能一起设置。
3、绝对定位和浮动不能一起设置,如果一起设置的话,浮动会失效,以定位为主。
4、绝对定位的元素可以通过margin来调整位置,但并不推荐一起使用。
5|0position:fixed
fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位参照的是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。
常用于我们在滚动屏幕时仍然需要固定在相同位置的元素。如果想要某个元素固定在页面的某个位置不动的话,就给这个元素设置 position:fixed
,并通过 top
或 bottom
和 left
或right
调整位置就能实现固定元素的效果。
不管滚动条如何滚动,box2定在所给定的那个位置没有移动。
固定定位的特点其实跟绝对定位的特点是一样的。
5|1position:sticky
sticky
跟前面四个属性值都不一样,它会产生动态效果,很像 relative
和fixed
的结合:一些时候是relative定位(定位基点是自身默认位置),另一些时候自动变成fixed定位(定位基点是视口)。
因此,它能够形成"动态固定"的效果。例子如下,初始加载时在自己的默认位置(relative定位)。
页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(fixed定位)。
等到页面重新向上滚动回到原位,工具栏也会回到默认位置。
sticky
生效的前提是,必须搭配top
、bottom
、left
、right
这四个属性一起使用,不能省略,否则不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作 sticky
的生效前提。
它的具体规则是,当页面滚动的距离大于设置的偏移值时,设置粘性定位的元素将固定在容器内的指定位置;当页面滚动的距离小于设置的偏移值时,设置粘性定位的元素将自动切换到最初的位置。
sticky属性有以下几个特点:
1、该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
2、当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。即如果你设置了top: 20px,那么在sticky元素到达距离相对定位的元素顶部20px的位置时固定,不再向上移动。
3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于浏览器窗口来计算元素的偏移量。
position:sticky使用条件:
position:sticky
这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。具体情况可以如下图:
以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!
__EOF__

本文链接:https://www.cnblogs.com/wmbuke/p/13688836.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签