CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））

科技2025-07-12 11

https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注！欢迎关注微信公众号：宝藏女孩的成长日记如有转载，请注明出处（如不注明，盗者必究）

固定定位

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>

当我下拉时，图片的位置是不会动的。即使下滑到了最底部，图片的位置也是固定的。对比下面这张图：

绝对定位和相对定位

子绝父相

子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。

实操代码理解

<!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）。

绝对定位

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相对定位，设置后，原来的位置始终保留着绝对定位，设置后，原来的位置会被后面的内容占据