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>
對了,在這里說一下,我目前是在職web前端開發,如果你現在正在學習前端,了解前端,渴望成為一名合格的web前端開發工程師,在入門學習前端的過程當中有遇見任何關于學習方法,學習路線,學習效率等方面的問題,都可以隨時關注并私信我:前端,我都會根據大家的問題給出針對性的建議,缺乏基礎入門的視頻教程也可以直接來找我,我這邊有最新的web前端基礎精講視頻教程, 還有我做web前端技術這段時間整理的一些學習手冊,面試題,開發工具,PDF文檔書籍教程,都可以直接分享給大家。
當我下拉時,圖片的位置是不會動的。即使下滑到了最底部,圖片的位置也是固定的。對比下面這張圖:
子絕父相就是指子元素設置絕對定位,而父元素設置相對定位。換句話說:如果要對一個子元素使用定位的話,讓子元素(絕對定位)以其父元素(相對定位)為標準來定位。
實操代碼理解
<!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>
原文鏈接:https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741
作者:我一個超級無敵可愛的人鴨
出處:CSDN
次我們來說一下,HTML網頁中的定位,有很多小伙伴一定好奇,為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中,我們的各種樣式,標簽,圖片等東西都是出現在網頁的各個位置,網頁看起來很美觀,各種盒模型擺放合理,這是因為在HTML中有定位的能力,今天我們就來學習一下。
position在英語中是位置的意思,而在我們CSS代碼中position也是跟位置有關的,position有三個屬性值分別為relative(相對定位:相對于自己原來的位置進行定位,但保留自己原來的位置,別的元素無法占用),absolute(絕對定位:相對于有定位的父級進行定位,如果沒有則相對于文檔進行定位,定位會脫離文檔,不保留原來的位置,會和原來的文檔不在一個層),fixed(位置定位:他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告,他也會脫離文檔流)。
我們說完了position,接下來我們就說說他是怎么進行定位的,我們有left,top,right,bottom,五個屬性分別對應 距左邊,距上邊,距右邊,距下邊,大家注意到我在每個方向前都加了個距字,我們所做的定位是距各個方向的距離而不是移動,例:left:200px,是向右移動200像素,他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom,我們知道,滑輪是可以一直往下滑的,所以我們相對于底部定位的話就很困難。
我們來通過代碼和結果來看一下:
沒有定位的樣式
加了relative
加了relative的結果
上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]
我們可以看出貓圖片并沒有移動,而是給兔子圖片留著位置。
加了absolute
加了absolute的結果
這個結果我們可以看出貓圖片向前移動了,并沒有保留兔子圖片原來的位置
加了fixed
代碼中的<br>是為了使滑輪可以滑動,以便更好的展示效果。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對兔子圖片起作用,我沒有給貓添加任何樣式,貓圖片只是作為參照物。
position:
absolute
特性:
1、脫離文檔流,定位元素占據的位置會釋放
2、原點計算:如果該元素做了定位,那么就去找它做了定位的父元素(找最近的)作為原點基準,如果父元素都沒做定位,則以瀏覽器(0,0)作為原點基準。
3、對內嵌元素定位后,設置寬高屬性就會有效果
應用場景:
一般情況下,絕對定位用在下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景
position:
relative
1、不脫離文檔流,定位元素占據的位置不會被釋放/
2、原點計算:以父級元素作為原點基準,若沒有父級元素則以瀏覽器(0,0)為基準。
一般的應用:父相子絕
3、父元素為相對定位,子元素為絕對定位,文檔元素不會受影響。
4、父元素提供相對定位后,子元素以父元素為基準來進行定位。
應用場景:
相對定位一般情況下很少自己單獨使用,都是配合絕對定位使用,為絕對定位創造定位父級而又不設置偏移量
position:
fixed
1、脫離了文檔流
2、原點計算:以瀏覽器(0,0)作為原點基準,盡管父元素做了定位也不會影響它的原點
基準。
應用場景:
一般在網頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等
注意:使用定位后會激活如下5個屬性
left | right | top | bottom | z-index
z-index
改變定位后的疊放順序
取值范圍:-1~9999
其他:
設置網頁元素的透明度
opacity: 0~1;
filter: opacity(0.2) | contrast(0.2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對定位</title>
<style type="text/css">
/*絕對定位:
*1、脫離文檔流,做了定位后它占據的位置會釋放。
*2、原點計算:如果該元素做了定位,那么就去找它做了定位的父元素(最近)作為原點基準,若果父元素
* 都沒做定位,則以瀏覽器(0,0)作為原點基準。
*3、對內嵌元素做了定位后,它的寬度高度屬性就會有效。
*/
*{
padding: 0px;
margin: 0px;
}
.box-father{
width: 500px;
height: 500px;
margin-left: 500px;
background-color: yellow;
position: absolute;
}
.son{
width: 400px;
height: 400px;
margin-left: 20px;
background-color: black;
position: absolute;
}
.box{
width: 300px;
height: 300px;
background-color: blue;
/*絕對定位*/
position: absolute;
/*激活4個屬性*/
left: 150px;
/*right: ;*/
top: 100px;
/*bottom: ;*/
}
.box2{
width: 400px;
height: 400px;
background-color: red;
}
span{
width: 200px;
height: 200px;
background-color: green;
/* position: absolute;*/
float: left;
}
</style>
</head>
<body>
<div class="zx"> <!-- 祖先 :定位-->
<div class="box-father"> <!-- 爺爺 :定位-->
<div class="son"> <!-- 兒子:定位-->
<div class="box"> <!-- 孫子:如果孫子做了定位,它就去找接近它定位最近的父元素來做為基準 -->
</div>
</div>
</div>
</div>
<div class="box2">
</div>
<span>我是span</span>
</body>
</html>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。