css备忘录- position
2020-08-19 本文已影响0人
叶落清秋
position共有以下4个值：
1.relative
2.absolute
3.fixed
4.static（默认值）
将根据top，right，bottom，left的值移动
1.demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
.demo{
display: block;
height: 100px;
background-color: #2AC845;
}
div{
background-color: #0062CC;
}
</style>
</head>
<body>
<a class="demo" herf="#"></a>
<div>
<p class="p1">第一行</p>
<p class="p2">第二行</p>
<p class="p3">第三行</p>
</div>
</body>
</html>
代码很简单，效果：
2. relative
给p1加上相对位置，并向下偏移100px
.p1{
position: relative;
top: 100px;
}
来看下效果：
很明显的可以看到，p1以其原先的位置偏移了100px，p2、p3位置并未改变。
所以relative的特性总结来说：
1，按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。
2，保留元素原有位置，其他元素位置保持不变
3. absolute
ok，现在给p1加上绝对位置，并向下偏移100px
.p1{
position: absolute;
top: 100px;
}
来看下效果：
可以看见p1以界面顶部(body)的位置向下偏移了100px，p2占据了p1原先的位置，p3则占据p2原先的位置（就如原先就未创建p1节点一样）。
可以看见并没有以父节点为定位点进行偏移，那么我们改动一下：
div{
position: relative;
background-color: #0062CC;
}
再来看下效果：
可以看见p1以div顶部的位置向下偏移了100px。将div的position修改为非默认值的效果是一致的。
所以absolute的特性总结来说：
1，absolute让元素漂浮起来，其他元素占用其原来位置
2，absolute以其父元素有position属性的元素为定位，如果没有该父元素，以浏览器窗口进行定位（这时候同等fixed效果)
4. fixed
fixed是特殊的absolute，即fixed总是以body为定位对象的，
按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。
如返回顶部的按钮就是用这个属性实现的，很好理解，不多做介绍了。
