固定定位
position:fixed;
用我自己的话来说,就是让你想要固定的东西固定。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
}
.photo{
width: 600px;
height: 600px;
position: fixed;
left: calc(50%-300px);
top: calc(50%-300px);
}
</style>
</head>
<body>
10月7日,昆凌在社交平台晒出自己荡秋千的美照。
照片中,昆凌长发披肩,头戴假日风草帽,
穿一袭白裙在海边荡着秋千,回眸甜笑,宛若仙子。
<div id="box1">
<img src="img/kunling.jpg" class="photo">
</div>
</body>
</html>
![4ad57f839b769d5ce86ca251a594d666.png](https://i-blog.csdnimg.cn/blog_migrate/e7f04e9bd3d180d064503088119eb000.jpeg)
当我下拉时,图片的位置是不会动的。即使下滑到了最底部,图片的位置也是固定的。对比下面这张图:
![94eff6216e1c5fdbfd26b472a6cd0afa.png](https://i-blog.csdnimg.cn/blog_migrate/4e17546118c5d1c70ed9ebb6f1fb0f84.jpeg)
绝对定位和相对定位
子绝父相
子绝父相就是指子元素设置绝对定位,而父元素设置相对定位。换句话说:如果要对一个子元素使用定位的话,让子元素(绝对定位)以其父元素(相对定位)为标准来定位。
实操代码理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 300px;
height: 300px;
background-color: coral;
position: relative;
border: solid 3px red;
}
#son1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
left: 20px;
top: 50px;
}
#son2{
width: 100px;
height: 100px;
background-color: chartreuse;
position: absolute;
left: 40px;
top: 90px;
}
</style>
</head>
<body>
<div id="father">
I am father
</div>
<div id="son1">
I am son1
</div>
<div id="son2">
I am son2
</div>
</body>
</html>
看图:在father这个容器设置了相对定位之后,son1和son2都设置了绝对定位,我们的子类这时其实不是在body中绝对定位(absolute),而是在其父类的范围中绝对定位(absolute)。
![8e64d195a84925fac03bac4f7f5ef0b3.png](https://i-blog.csdnimg.cn/blog_migrate/9b7462ce2733ed4b11c67a1e5ce32fc9.png)
绝对定位
position: absolute;
查找定位的参照物方法:
从当前元素开始往上找,直到找到一个具有定位属性的元素为准,以这个元素为参照进行定位。
如果没有一个元素有定位属性,最终就参照body进行定位。(我一直理解的就是绝对定位就是你想定哪里定哪里)
定位的时候:结合top left right bottom 这四个方向属性进行配合定位。但是要注意:不能同时选择left喝right
注意:这里要区别于相对定位,在使用相对定位时,无论是否进行移动,原来的位置就没有了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
background-color: salmon;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div id="box1">
我是box1,我采用了绝对定位
</div>
</body>
</html>
相对定位
position: relative;
相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;
注意,在使用相对定位时,无论是否进行移动,原来的位置始终保留着。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: brown;
position: relative;
left: 300px;
top: 300px;
}
#box2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
</html>
绝对定位和相对定位的区别
- 相对定位的参照物是参照物本身。
绝对定位的参照物就是父级元素,当父级元素中不存在相对定位,那么它的参照物就是body - 相对定位,设置后,原来的位置始终保留着
绝对定位,设置后,原来的位置会被后面的内容占据
原文链接:CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))_hanhanwanghaha的博客-CSDN博客
作者:我一个超级无敌可爱的人鸭
出处:CSDN