引言
CSS(层叠样式表)中的position
属性一直是控制元素定位的核心工具,对于构建响应式设计和复杂布局至关重要。
positon
属性并不复杂,但想要正确使用却并不容易。这篇文章将带领你全方位深入理解position
,希望能帮助你彻底解决这个让人头痛的问题。
position
在官方文档中这么定义position
属性
CSS
position
属性用于指定一个元素在文档中的定位方式。top
,right
,bottom
和left
属性则决定了该元素的最终位置。
其实说白了就一句话:能够灵活的改变盒子在网页中的位置
四个定位类型和五个取值
position只有四个定位类型和五个取值,下面让我们来一一介绍。
四个定位类型
- 定位元素(positioned element)是其位置属性为
relative
,absolute
,fixed
或sticky
的一个元素(换句话说,除static
以外的任何东西)。 - 相对定位元素(relatively positioned element)是位置属性为
relative
的元素。 - 绝对定位元素(absolutely positioned element)是位置属性为
absolute
或fixed
的元素。 - 粘性定位元素(stickily positioned element)是位置属性为
sticky
的元素。
五个取值
static:
是CSS 属性的默认值。属性为static的元素将按照标准的文档流进行布局,不受top
,right
,bottom
,left
,z-index
等属性的影响,其他元素会根据 static
定位元素的位置进行布局,不会因为 static
定位元素的移动而受到影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
margin: 20px;
width: 200px;
height: 200px;
padding: 5px;
border: 1px solid red;
background-color: green;
}
#box2 {
margin: 10px;
width: 300px;
height: 300px;
background-color: yellow;
}
#box3 {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<!--
box1 在box2上面,正常的文档流
html 文档流 和 css 结合 样式生效 盒模型
-->
<div id="box1">
</div>
<div id="box2">
<div id="box3">box3</div>
</div>
</body>
</html>
static:正常文档流,没有什么特别的变化
relative:
相对定位。相对于原位置移动 ,盒子原来的占位(文档流中的位置) 不受影响。显示模式特点保持不变(块级元素,行内元素,行内块元素等),
现在我们为box1盒子添加相对定位
#box1 {
position: relative;
/* 相对自身 */
top: 30px;
left: 30px;
}
可以看到box1发生了一点小小的变化,它通过top
和left
相对于原来的位置离开了,但之前的位置并没有被box2占用掉。
absolute:
绝对定位。不占用原位置。显示模式具备行内块特点。设置边偏移则相对最近的已经定位的祖先元素改变位置。如果祖先元素都未定位,则相对浏览器可视区改变位置。
为box3添加绝对定位
#box3 {
position: absolute;
/* 绝对定位 相对于父元素 */
top: 10px;
left: 10px;
}
这里可能跟预想的不太一样了,出现了特殊情况。就如上面说到的,设置absolute
值之后,相对最近的已经定位的祖先元素改变位置。如果祖先元素都未定位,则相对浏览器可视区改变位置。目前我们并没有给box2添加position
定位属性,所以box3将相对于浏览器可视区来改变自身的位置。
那我们现在为box2添加一个position:relative
#box2 {
position: relative;
}
这回box3终于相对于box2定位了,这也引出了我们常用的一种定位方法:子绝父相
在使用相对定位时,常常把子元素设置为position: absolute
,把父元素设置为position: relative
,来保证能够实现我们想要的结果。
fixed:
固定定位。是一种特殊的绝对定位。元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。也就是说,元素的位置在网页滚动时不会改变。就好比一些网页上左右两边的浮窗,显示模式具备行内块特点。相对于浏览器窗口进行定位。
我们把box3的absolute
改为fixed
。
#box3 {
position: fixed;
}
再为你的html
添加一些增高的东西,使它能够上下滑动,你就会发现无论你怎么滑动页面,box3永远会出现在你的浏览器的左上角
sticky:
粘性定位。它结合了 position: relative
和 position: fixed
的特点。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。
还是box3,我们将他的position
改为sticky
。
#box3 {
position: sticky;
}
这回我们看到在滑动到box3之前,它一直是相对定位。当我们滑动到box3的顶部与浏览器顶部重合时,他开始变成固定定位,跟随窗口一直出现在浏览器的左上角。但是,当我们滑动页面直到box2看不到的时候,box3也会跟着消失。因为box3是box2的子元素,活动范围只在box2中,它不能够脱离box2的掌控。
总结
我们深入探讨了CSS position
属性的各种模式——从静态定位到绝对定位、相对定位、固定定位以及粘性定位,每种模式都有其独特的应用场景和优势。掌握了这些知识,你将能够更加灵活地控制网页中各个元素的位置,创造出既美观又功能性强的网页布局。