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

staticposition 属性的默认值。如果省略 position属性,浏览器就认为该元素是 static定位。

这时,浏览器会按照代码的顺序,决定每个元素的位置,这称为"正常的文档流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。

注意,static定位所导致的元素位置,是浏览器自主决定的,所以这时top、bottom、left、right、 z-index这五个属性无效。

3|0position:relative

相对定位的偏移参考元素是元素本身原来的位置,不会使元素脱离文档流。设置了相对定位的元素不管它是否进行移动,元素仍然占据它原来的位置。移动元素会导致它覆盖其他的元素。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级。它必须搭配top、bottom、left、right这四个属性使用,用来设置偏移的方向和距离。例子如下:

没有使用position:relative时:

<div class="box"> <div class="same one"></div> </div>
.box{ width:200px; border:1px solid #ccc; } .box>.same{ width:200px; height:200px; line-height: 50px; text-align: center; color: azure; margin-bottom: 20px; } .box>.one{ background:#CCCCCC; }

使用position:relative时:

.box>.one{ background:#CCCCCC; position: relative; top: 10px; left:10px; }

我们使用了 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属性来控制这些元素的排列顺序。

<div class="box"> <div class="same one"></div> <div class="same two"></div> <div class="same three"></div> </div>
.box{ width:200px; border:1px solid #ccc; } .box>.same{ width:200px; height:200px; line-height: 50px; text-align: center; color: azure; margin-bottom: 20px; } .box>.one{ background:#CCCCCC; } .box>.two{ background:pink; } .box>.three{ background:burlywood; }

正常文档流显示的效果:

未给父级元素 .box 添加相对定位,给 .two 元素设置绝对定位例子如下:

.box>.two{ background:pink; position: absolute; top:20px; left:20px; }

以上例子可以看出由于未给父级元素 .box 添加相对定位,给 .two 元素设置绝对定位,使的 .two 脱离了普通流,原来的位置没有保留,而且将 .one 覆盖,并对文档的根元素进行了绝对定位,定位于距离文档根元素顶部20px,左侧20px的位置。

给父级元素 .box 添加相对定位,然后再给 .two 元素设置绝对定位例子如下:

.box{ width:200px; border:1px solid #ccc; position: relative; } .box>.two{ background:pink; position: absolute; top:20px; left:20px; }

以上例子可以看出 .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 bottomleftright 调整位置就能实现固定元素的效果。

<style> body{ height: 1500px; } .box{ width: 200px; height: 200px; color:#fff; border:1px solid #000; } .box1{ background:#350; } .box2{ background:#330; position: fixed; top:100px; left:100px; } .box3{ background:#390; } </style> <div class="box box1">box1</div> <div class="box box2">box2</div> <div class="box box3">box3</div>

效果如下:

不管滚动条如何滚动,box2定在所给定的那个位置没有移动。

固定定位的特点其实跟绝对定位的特点是一样的。

5|1position:sticky

sticky 跟前面四个属性值都不一样,它会产生动态效果,很像 relativefixed 的结合:一些时候是relative定位(定位基点是自身默认位置),另一些时候自动变成fixed定位(定位基点是视口)。

因此,它能够形成"动态固定"的效果。例子如下,初始加载时在自己的默认位置(relative定位)。

<div class="box box11">111111</div> <div class="box box1 active">222222</div> <div class="box box2">333333</div> <div class="box box3">444444</div> <div class="box box4">555555</div> <div class="box box5">666666</div>
.box{ width:50%; height:400px; color:#fff; margin-bottom: 20px; } .box11{ background:#f00; } .box1{ background:#000; } .box2{ background:palegoldenrod; } .box3{ background:peru; } .box4{ background:blueviolet; } .box5{ background:burlywood; } .active{ position:sticky; top:0px; }

页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(fixed定位)。

等到页面重新向上滚动回到原位,工具栏也会回到默认位置。

sticky 生效的前提是,必须搭配topbottomleftright 这四个属性一起使用,不能省略,否则不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作 sticky 的生效前提。

它的具体规则是,当页面滚动的距离大于设置的偏移值时,设置粘性定位的元素将固定在容器内的指定位置;当页面滚动的距离小于设置的偏移值时,设置粘性定位的元素将自动切换到最初的位置。

sticky属性有以下几个特点

1、该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。

2、当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。即如果你设置了top: 20px,那么在sticky元素到达距离相对定位的元素顶部20px的位置时固定,不再向上移动。

3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于浏览器窗口来计算元素的偏移量。

position:sticky使用条件:

1. 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性; 2. 必须制定 topbottomleftright 4个值之一,否则只会处于相对定位; 3. 父元素的高度不能低于sticky 元素的高度; 4. sticky 元素仅在其父元素内生效;

position:sticky 这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。具体情况可以如下图:


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!


__EOF__

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