當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2025/3/15 CSS 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

相對定位，設置后，原來的位置始終保留著
絕對定位，設置后，原來的位置會被后面的內容占據