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
CSS定位屬性允許您定位元素。它還可以將元素放在另一個元素之后,并指定當元素的內容太大時應該發生什么。
可以使用頂部,底部,左側和右側屬性定位元素。但是,除非首先設置position屬性,否則這些屬性將不起作用。根據定位方法,它們的工作方式也不同。
有三種定位方式:靜態、固定、相對定位。
HTML元素默認為靜態。靜態定位元件總是根據頁面的正常流動來定位。靜態元素不受top bottom left right的影響。
具有固定位置的元素相對于瀏覽器窗口定位,即使滾動窗口也不會移動。
可以使用頂部,右側,底部和左側的一個或多個屬性指定位置。
相對定位的元件相對于其正常位置定位。頂部,右側,底部和左側的屬性可用于指定元件如何移動。
相對于具有position屬性設置的父對象的偏移量,不占用原頁面空間。
若所有的父對象都沒有設置position屬性,則以body即瀏覽器窗口為參照進行定位。
一般,將父元素position設置為relative,子元素設置為absolute,這樣子元素可以相對于父元素進行定位,而父元素保持原位(不設置父元素偏移量的話)
理解定位,首先要了解文檔流是什么。
文件流:指盒子按照html標簽編寫的順序,從上到下,從左到右排列,塊元素占一行,從左到右排列,每一行元素在一行中從左到右排列,先寫的先,后寫的排在后面,每個盒子都占據自己的位置。
位置可以使方框脫離文檔流,就好比將元素分割成幾層,沒有位置的在一層,定位在沒有定位的上面一層。
你可以用Z-index設置等級,Z-index越大,顯示的就越向前。在創建網頁彈框時,通常將其設置為最大。
我們可以使用css的position屬性來設置元素的定位類型,postion的設置項如下:
relative生成相對定位元素,元素所占據的文檔流的位置保留,元素本身相對自身原位置進行偏移。
absolute生成絕對定位元素,元素脫離文檔流,不占據文檔流的位置,可以理解為漂浮在文檔流的上方,相對于上一個設置了定位的父級元素來進行定位,如果找不到,則相對于body元素進行定位。
fixed生成固定定位元素,元素脫離文檔流,不占據文檔流的位置,可以理解為漂浮在文檔流的上方,相對于瀏覽器窗口進行定位。
static默認值,沒有定位,元素出現在正常的文檔流中,相當于取消定位屬性或者不設置定位屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素的定位</title>
<style>
.con1,.con2,.con3,.con4,.con5{
border: 1px solid #000;
margin: 10px;
height: 400px;
}
/* 這個div屬于它下屬div的父元素,如果沒有設置浮動,當下屬div設置absolute時,相對于body偏移*/
.con3{
position: relative;
}
.no_pos_1,.no_pos_2{
height: 100px;
width: 400px;
margin :10px;
font-size: 16px;
}
.no_pos_1{
background-color: red;
}
.no_pos_2{
background-color: gold;
}
.relative_1,.relative_2{
height: 100px;
width: 400px;
margin-top :10px;
font-size: 16px;
}
.relative_1{
background-color: red;
position: relative;
left: 50px;
top: 50px;
}
.relative_2{
background-color: gold;
}
.absolute_1,.absolute_2{
height: 100px;
width: 400px;
margin-top :10px;
font-size: 16px;
}
.absolute_1{
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.absolute_2{
background-color: gold;
}
.fixed_1,.fixed_2{
height: 100px;
width: 400px;
margin-top :10px;
font-size: 16px;
}
.fixed_1{
background-color: red;
position: fixed;
left: 50%;
margin-left: -200px; /* 設置水平垂直居中*/
top: 50%;
margin-top: -50px;
z-index: 9999; /* 彈框一般設置足夠大的值 */
}
/* 彈框效果 */
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6; /* 設置透明度 */
z-index: 9998; /* 一般比彈框設置的值小1*/
}
.fixed_2{
background-color: gold;
}
.static_1{
height: 100px;
width: 400px;
margin-top :10px;
background-color: gold;
position: static;
}
</style>
</head>
<body>
<div class="mask">
</div>
<div class="con1">
<div class="no_pos_1">
沒有使用定位
</div>
<div class="no_pos_2">
沒有使用定位
</div>
</div>
<div class="con2">
<div class="relative_1">
relative 生成相對定位元素,元素所占據的文檔流的位置保留,元素本身相對自身原位置進行偏移
</div>
<div class="relative_2">
</div>
</div>
<div class="con3">
<div class="absolute_1">
absolute 生成絕對定位元素,元素脫離文檔流,不占據文檔流的位置,可以理解為漂浮在文檔流的上方,相對于上一個設置了定位的父級元素來進行定位,如果找不到,則相對于body元素進行定位
</div>
<div class="absolute_2">
</div>
</div>
<div class="con4">
<div class="fixed_1">
fixed 生成固定定位元素,元素脫離文檔流,不占據文檔流的位置,可以理解為漂浮在文檔流的上方,相對于瀏覽器窗口進行定位。
</div>
<div class="fixed_2">
</div>
</div>
<div class="con5">
<div class="static_1">
static 默認值,沒有定位,元素出現在正常的文檔流中,相當于取消定位屬性或者不設置定位屬性。
</div>
</div>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143復制代碼類型:[html]
制作一個彈框效果:
「鏈接」
*請認真填寫需求信息,我們會在24小時內與您取得聯系。