CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（⼦绝⽗
相））
⽬录css固定定位
固定定位
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>
当我下拉时，图⽚的位置是不会动的。即使下滑到了最底部，图⽚的位置也是固定的。对⽐下⾯这张图：
绝对定位和相对定位
⼦绝⽗相
⼦绝⽗相就是指⼦元素设置绝对定位，⽽⽗元素设置相对定位。换句话说：如果要对⼀个⼦元素使⽤定位的话，让⼦元素（绝对定位）以其⽗元素（相对定位）为标准来定位。
实操代码理解
<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）。
绝对定位
position: absolute;
查定位的参照物⽅法：
从当前元素开始往上，直到到⼀个具有定位属性的元素为准，以这个元素为参照进⾏定位。
如果没有⼀个元素有定位属性，最终就参照body进⾏定位。（我⼀直理解的就是绝对定位就是你想定哪⾥定哪⾥）
定位的时候：结合top left right bottom 这四个⽅向属性进⾏配合定位。但是要注意：不能同时选择left
喝right
注意：这⾥要区别于相对定位，在使⽤相对定位时，⽆论是否进⾏移动，原来的位置就没有了。
<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时的位置，然后通过设置垂直或⽔平位置，让这个元素“相对于”它的原始起点进⾏移动；
注意，在使⽤相对定位时，⽆论是否进⾏移动，原来的位置始终保留着。
<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>
绝对定位和相对定位的区别
1. 相对定位的参照物是参照物本⾝。
绝对定位的参照物就是⽗级元素，当⽗级元素中不存在相对定位，那么它的参照物就是body 2. 相对定位，设置后，原来的位置始终保留着
绝对定位，设置后，原来的位置会被后⾯的内容占据

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。