CSS中的四种定位方式详细整理（position）
·
目录
一、position的可选值
static：默认值，元素是静止的，没有开启定位relative：开启绝对定位absolute：开启相对定位fixed：开启固定定位staick：开启粘滞定位
定位需要用到四个偏移量，画个图示：
top/bottom:10px：定位元素和定位位置上/下边的距离，通常只会用其一；
left/right:10px：定位元素和定位位置做/右边的距离，通常只会用其一。
二、相对定位：position:relative
- 特点：
① 元素开启相对定位，不设置偏移量元素不会发生任何变化，通过偏移量的设置来改变元素的位置；
② 相对定位会提升元素的一个层级；
③ 相对定位不会脱离文档流，不会改变元素的性质（块元素还是块元素，行内元素还是行内元素）；
像下边这个例子，虽然我们通过定位把box1移动了位置，但在他初始位置的地方，仍然空出了和自己本身大小相同的块元素位置，有点类似于灵魂出窍的感觉：
<style>
.box1{
height:100px;
width:100px;
background-color:tomato;
position:relative;
top:100px;
left:100px;
}
.box2{
height:100px;
width:100px;
background-color:orange;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
- 参照物：参照元素在文档流中的位置进行定位，相对定位的参照物是他自己
本身的初始位置。
<style>
.box1{
height:100px;
width:100px;
background-color:tomato;
}
.box2{
height:100px;
width:100px;
background-color:orange;
position:relative;
top:100px;
left:100px;
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
三、绝对定位：positon:absulote
- 特点
① 开启绝对定位，不设置偏移量，元素位置不发生任何变化
② 绝对定位会提升元素的一个层级
③ 绝对定位会使元素脱离文档流（行内元素变成块元素，块元素的告诉被内容撑开） - 参照物：绝对定位是相对于其
包含块进行定位。 - 包含块：分为两种情况，在文档流中和不在文档流中
① 在文档流中：指的是离当前元素最近的祖先元素块元素
② 不在文档流中：指的是离其最近的开启了定位的祖先元素。如果所有的祖先元素都没有定位，则相对于根元素（即初始包含块html）
举个例子，这里有五个元素块，父子兄弟关系都有：
这个里边box4–box5–box2依次为祖先关系，我们将box4和box5都设置为相对定位（在文档流中），然后将box2设置为绝对定位，但是又没有设置偏移量，所以box4和box5就原地不动，而box2就会在自己的初始参照位置，如下图，box2移到了最近的开启了定位了的父元素box5的左顶点：
去掉box5的定位后，移到了最近的开启了定位了的父元素box4的左顶点：
三、固定定位：position:fixed
固定定位也是一种绝对定位，大部分的特点都相同。唯一不同的点是：固定定位永远参考于浏览器的视口定位（视口：固定不动，不会随网页的滚的动而滚动）
可以看到，当我们向下滑动界面时，黄色的元素始终在浏览器的左上角位置。
四、粘滞定位：position:sticky
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在到某一位置后不再滚动：
拿之前写的导航条为例，当下拉界面滚动到导航条时，滚动条不再移动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../reset.css">
<title>Surymy</title>
<style>
body{
height:2000px;
}
.nav{
width:1210px;
height:48px;
background-color:#E8E7E3;
margin:100px auto;
position:sticky;
top:0px;
left:0px;
}
.nav li{
float:left;
}
.nav a{
display:block;
line-height:48px;
text-decoration: none;
font-size:18px;
color:#777777;
padding:0 40px;
}
.nav a:hover{
background-color:#3F3F3F;
color:#E8E7E3;
}
.nav li:last-child a{
padding:0 44px 0 44px ;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Brower Side</a>
</li>
<li>
<a href="#">Sever Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</body>
</html>
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)