static(静态定位),fixed(固定定位),relative(相对定位),absolute(绝对定位)
Position的取值:
static(静态定位) : 表示块保留在原本应该在的位置,不会重新定位。
fixed(固定定位):元素就被固定不会随着滚动条的拖动而改变位置。
relative(相对定位) :相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。
absolute(绝对定位):绝对定位,是相对于最近的且不是static定位的父元素来定位。
1.static(静态定位)
如果没有指定元素的position属性值,也就是默认情况下,元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保留在原本应该在的位置,不会重新定位。
说白了,平常我们根本就用不到“position:static”,不过呢,如果有时候我们使用javascript来控制元素定位的时候,如果想要使得其他定位方式的元素变成静态定位,就要使用“position:static;”来实现。
2.fixed(固定定位)
当元素的position属性设置为fixed时,这个元素就被固定了,被固定的元素不会随着滚动条的拖动而改变位置。在视野中,固定定位的元素的位置是不会改变的。(对应页面尾代码块1)
3.relative(相对定位)与absolute(绝对定位)
首先设置一个简单的页面用做后续分析(如图)对应页面尾代码块2:
将div2的position属性设置为relative:
<style type="text/css">
#container{
width: 1000px;
margin: auto;
}
.div1{
height: 100px;
background-color: royalblue;
}
.div2{
height: 100px;
background-color: blueviolet;
position: relative;
top: 30px;
left: 30px;
}
.div3{
height: 100px;
background-color: deeppink;
}
.div4{
height: 100px;
background-color: deepskyblue;
}
</style>
定位为relative的元素脱离正常的文档流中,但其在文档流中的原位置依然存在,后面的无定位元素仍然不会“挤上来”。
将div2的position属性设置为absolute:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaT0iuGy-1595250927012)(images/4-1595248465444.png)]
定位为absolute的层完全脱离正常文档流了,和relative层不同的是,绝对定位元素的前面或者后面的元素会认为这个元素并不存在,即这个元素浮于其他元素上面,它是独立出来的。并且在没有给div设置宽度的情况下设为absolute的层宽度就是其中的内容宽度。
在这里可能大家会发现为什么设置为absolute的层不在container(上图中的黑框)层内,而设置为relative的层还在container(上图中的黑框)层内?请继续看下文分析。
这里一共有4个带有颜色的div,并且4个div都放在id为container的层里
<body>
<div id="container">
<div class="div1">第一个div</div>
<div class="div2">第二个div</div>
<div class="div3">第三个div</div>
<div class="div4">第四个div</div>
</div>
</body>
container层和div2层的css代码
<style type="text/css">
#container{
width: 1000px;
margin: auto;
}
.div2{
height: 100px;
background-color: blueviolet;
position: absolute;
top: 30px;
left: 30px;
}
</style>
top和left是相对于离它最近且不是static定位的父元素来定位的,在此div2的直接父元素是id为container的层,但有父元素并没有设置position属性,所以div2要继续向上寻找间接父元素,于是找到相对于根元素即body元素来定位。
如果为container层真加position属性:
<style type="text/css">
#container{
width: 1000px;
margin: auto;
position: relative;
}
.div2{
height: 100px;
background-color: blueviolet;
position: absolute;
top: 30px;
left: 30px;
}
</style>
效果图:
此时div2层定位时相对的父元素就是container层。
还有一个小知识补充:absolute定位的子元素宽度不会影响父元素的宽,而relative定位的子元素会撑大父元素。分析如下:
我们把div1,div3,div4层去掉,并且为container层设置定位属性为absolute。div2层的定位属性为relative;
<style type="text/css">
#container{
margin: auto;
position: absolute;
background-color: hotpink;
}
.div2{
height: 100px;
background-color: blueviolet;
position: relative;
top: 30px;
left: 30px;
}
</style>
效果图:
我们发现代码中没有设置div2宽度,div2层的宽度会等于父元素宽度
为div2层添加宽度,并且删除container层宽度:
<style type="text/css">
#container{
margin: auto;
position: absolute;
background-color: hotpink;
}
.div2{
height: 100px;
width: 1000px;
background-color: blueviolet;
position: relative;
top: 30px;
left: 30px;
}
</style>
效果图:
本文参考:https://blog.csdn.net/weixin_42067967/article/details/80152403;
代码块1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fixed</title>
<style type="text/css">
.test
{
width:60px;
height:60px;
border:1px solid silver;
background-color:#FA16C9;
}
#div1{
position:fixed;/*设置元素为固定定位*/
top:100px;/*距离浏览器顶部30px*/
left:100px;/*举例浏览器左部160px*/
}
#div3{
position:fixed;/*设置元素为固定定位*/
top:100px;/*距离浏览器顶部30px*/
right:100px;/*举例浏览器左部160px*/
}
#div2{
width:500px;
height:1000px;
margin: auto;
border:1px solid gray;
line-height:600px;
background-color:#B7F1FF;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1" class="test">固定定位的div元素</div>
<div id="div2">参考层</div>
<div id="div3" class="test">固定定位的div元素</div>
</body>
</html>
<!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 type="text/css">
#container{
width: 1000px;
margin: auto;
}
.div1{
height: 100px;
background-color: royalblue;
}
.div2{
height: 100px;
background-color: blueviolet;
}
.div3{
height: 100px;
background-color: deeppink;
}
.div4{
height: 100px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div id="container">
<div class="div1">第一个div</div>
<div class="div2">第二个div</div>
<div class="div3">第三个div</div>
<div class="div4">第四个div</div>
</div>
</body>
</html>
background-color: deepskyblue;
}
</style>