次我們來說一下,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://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對兔子圖片起作用,我沒有給貓添加任何樣式,貓圖片只是作為參照物。
SS 有兩個最重要的基本屬性,前端開發必須掌握:display
和position
。
display
屬性指定網頁的布局。兩個重要的布局,我已經介紹過了:彈性布局flex
[1]和網格布局grid
[2]。
本文介紹非常有用的position
屬性。我希望通過10分鐘的閱讀,幫助大家輕松掌握網頁定位,說清楚瀏覽器如何計算網頁元素的位置,尤其是新引進的sticky
定位。
本文由國內最大的在線教育平臺之一“騰訊課堂”[3]贊助。他們現在啟動了“騰訊課堂101計劃”[4],推廣平臺上的課程資源,有不少優質內容。希望提高前端技術水平的同學,可以留意一下本文結尾的免費課程信息。
position
屬性用來指定一個元素在網頁上的位置,一共有5種定位方式,即position
屬性主要有五個值。
?
static
?relative
?fixed
?absolute
?sticky
下面就依次介紹這五個值。最后一個sticky
是2017年瀏覽器才支持的,本文將重點介紹。
static
是position
屬性的默認值。如果省略position
屬性,瀏覽器就認為該元素是static
定位。
這時,瀏覽器會按照源碼的順序,決定每個元素的位置,這稱為“正常的頁面流”(normal flow)。每個塊級元素占據自己的區塊(block),元素與元素之間不產生重疊,這個位置就是元素的默認位置。
注意,static
定位所導致的元素位置,是瀏覽器自主決定的,所以這時top
、bottom
、left
、right
這四個屬性無效。
relative
、absolute
、fixed
這三個屬性值有一個共同點,都是相對于某個基點的定位,不同之處僅僅在于基點不同。所以,只要理解了它們的基點是什么,就很容易掌握這三個屬性值。
這三種定位都不會對其他元素的位置產生影響,因此元素之間可能產生重疊。
relative
表示,相對于默認位置(即static
時的位置)進行偏移,即定位基點是元素的默認位置。
它必須搭配top
、bottom
、left
、right
這四個屬性一起使用,用來指定偏移的方向和距離。
div {
position: relative;
top: 20px;
}
上面代碼中,div
元素從默認位置向下偏移20px
(即距離頂部20px
)。
absolute
表示,相對于上級元素(一般是父元素)進行偏移,即定位基點是父元素。
它有一個重要的限制條件:父元素不能是static
定位,否則定位基點就會變成整個網頁的根元素html
。另外,absolute
定位也必須搭配top
、bottom
、left
、right
這四個屬性一起使用。
/*
HTML 代碼如下
<div id="father">
<div id="son"></div>
</div>
*/
#father {
positon: relative;
}
#son {
position: absolute;
top: 20px;
}
上面代碼中,父元素是relative
定位,子元素是absolute
定位,所以子元素的定位基點是父元素,相對于父元素的頂部向下偏移20px
。如果父元素是static
定位,上例的子元素就是距離網頁的頂部向下偏移20px
。
注意,absolute
定位的元素會被“正常頁面流”忽略,即在“正常頁面流”中,該元素所占空間為零,周邊元素不受影響。
fixed
表示,相對于視口(viewport,瀏覽器窗口)進行偏移,即定位基點是瀏覽器窗口。這會導致元素的位置不隨頁面滾動而變化,好像固定在網頁上一樣。
它如果搭配top
、bottom
、left
、right
這四個屬性一起使用,表示元素的初始位置是基于視口計算的,否則初始位置就是元素的默認位置。
div {
position: fixed;
top: 0;
}
上面代碼中,div
元素始終在視口頂部,不隨網頁滾動而變化。
sticky
跟前面四個屬性值都不一樣,它會產生動態效果,很像relative
和fixed
的結合:一些時候是relative
定位(定位基點是自身默認位置),另一些時候自動變成fixed
定位(定位基點是視口)。
因此,它能夠形成“動態固定”的效果。比如,網頁的搜索工具欄,初始加載時在自己的默認位置(relative
定位)。
頁面向下滾動時,工具欄變成固定位置,始終停留在頁面頭部(fixed
定位)。
等到頁面重新向上滾動回到原位,工具欄也會回到默認位置。
sticky
生效的前提是,必須搭配top
、bottom
、left
、right
這四個屬性一起使用,不能省略,否則等同于relative
定位,不產生“動態固定”的效果。原因是這四個屬性用來定義“偏移距離”,瀏覽器把它當作sticky
的生效門檻。
它的具體規則是,當頁面滾動,父元素開始脫離視口時(即部分不可見),只要與sticky
元素的距離達到生效門檻,relative
定位自動切換為fixed
定位;等到父元素完全脫離視口時(即完全不可見),fixed
定位自動切換回relative
定位。
請看下面的示例代碼。(注意,除了已被淘汰的 IE 以外,其他瀏覽器目前都支持sticky
。但是,Safari 瀏覽器需要加上瀏覽器前綴-webkit-
。)
#toolbar {
position: -webkit-sticky; /* safari 瀏覽器 */
position: sticky; /* 其他瀏覽器 */
top: 20px;
}
上面代碼中,頁面向下滾動時,#toolbar
的父元素開始脫離視口,一旦視口的頂部與#toolbar
的距離小于20px
(門檻值),#toolbar
就自動變為fixed
定位,保持與視口頂部20px
的距離。頁面繼續向下滾動,父元素徹底離開視口(即整個父元素完全不可見),#toolbar
恢復成relative
定位。
sticky
定位可以實現一些很有用的效果。除了上面提到“動態固定”效果,這里再介紹兩個。
堆疊效果(stacking)指的是頁面滾動時,下方的元素覆蓋上方的元素。下面是一個圖片堆疊的例子,下方的圖片會隨著頁面滾動,覆蓋上方的圖片(查看 demo[5])。
HTML 代碼就是幾張圖片。
<div><img src="pic1.jpg"></div>
<div><img src="pic2.jpg"></div>
<div><img src="pic3.jpg"></div>
CSS 代碼極其簡單,只要兩行。
div {
position: sticky;
top: 0;
}
它的原理是頁面向下滾動時,每張圖片都會變成fixed
定位,導致后一張圖片重疊在前一張圖片上面。詳細解釋可以看這里[6]。
大型表格滾動的時候,表頭始終固定,也可以用sticky
實現(查看 demo[7])。
CSS 代碼也很簡單。
th {
position: sticky;
top: 0;
}
需要注意的是,sticky
必須設在<th>
元素上面,不能設在<thead>
和<tr>
元素,因為這兩個元素沒有relative
定位,也就無法產生sticky
效果。詳細解釋可以看這里[8]。
(正文完)
初學者剛接觸前端,往往會被一大堆技術名詞、框架和工具,搞得眼花繚亂。
到底哪些技術是目前的主流技術棧,既能用于公司的開發實務,又能為自己的簡歷增添亮點?
下面就是一套目前主流的前端技術棧。
(1)Node.js:服務器端的 JavaScript 運行環境,不管哪種前端開發,都必不可少的底層環境。
(2)Webpack:語法轉換工具,把 ES6/TypeScript/JSX 語法轉成瀏覽器可以運行的代碼。
(3)Koa2:一個非常流行、簡潔強大的 Node.js 后端的 Web 開發框架。
(4)MongoDB:目前應用最廣泛的非關系數據庫之一,功能豐富,用法較簡單。
(5)Vue 全家桶:
?Vue:前端基礎框架?Vuex:配套的前端狀態管理庫。?Vue Router:官方的路由插件,構建單頁面應用必不可少。?Vue CLI:腳手架工具,幫你快速上手 Vue 開發,無需再花多余時間去實現項目架構。?Vant:有贊前端團隊開發的輕量級移動端 Vue 組件庫,讓你快速使用已經封裝好的各種頁面組件。
看到這個名單,你是不是感到有點頭大,全部掌握它們需要多少時間啊?
現在,騰訊課堂就有一門這樣的課程,內容包含了所有這些工具,教你怎么用它們從頭完成一個全棧項目,親手做出一個手機端的移動商城,是由 慕課網的精英講師--謝成老師講授。
該課程的制作單位是青盟科技。它是《騰訊課堂101計劃》重點推廣的優質機構,已有7年 IT 行業教學經驗,培養收費學員2000+,有超過72%的學員都進入到名企大廠。如果你想了解課程的詳細內容,獲取課程大綱,或者想接受系統的前端培訓,可以登錄騰訊課堂查看“青盟科技”。
(完)
[1]
彈性布局flex
:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[2]
網格布局grid
:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
[3]
“騰訊課堂”:https://ke.qq.com/?utm=ruanyifeng
[4]
“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm
[5]
demo:https://jsbin.com/fegiqoquki/edit?html,css,output
[6]
這里:https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f
[7]
demo:https://jsbin.com/decemanohe/edit?html,css,output
[8]
這里:https://css-tricks.com/position-sticky-and-table-headers/
定位:將盒子定在某一個位置
定位=定位模式+邊偏移
定位模式~>指定一個元素在文檔中的定位方式
div {
/* 定位模式 值
static~>靜態定位 (默認方式) 無定位
relative~>相對定位
absolute~>絕對定位
fixed~>固定定位 */
position: static;
}
邊的偏移~>決定了該元素的最終位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
position: absolute;
/* 偏移方向:偏移距離 上 下 左 右 */
top: 100px;
bottom: 100px;
left: 100px;
right: 100px;
background-color: lightsteelblue;
}
</style>
</head>
<body>
<div>盒子A</div>
</body>
</html>
相對定位是元素在移動位置的時候,相當于它原來的位置
特點:
實踐效果:
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.Lazy {
position: relative;
top: 100px;
left: 100px;
background-color: lightsteelblue;
}
</style>
</head>
<body>
<div class="Lazy">懶羊羊</div>
<div>喜羊羊</div>
</body>
</html>
絕對定位 是元素在移動位置的時候,是相對于它祖先的元素來說的
特點:
實踐
1.祖先元素無定位 以瀏覽器為基礎
效果展示:
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.Pleasant {
float: right;
width: 400px;
height: 400px;
background-color: pink;
}
.small-bell {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background-color: lightsteelblue;
}
</style>
</head>
<body>
<div class="Pleasant">
喜羊羊
<div class="small-bell">鈴鐺</div>
</div>
</body>
</html>
2.祖先有定位 以上一級為基礎
效果展示
代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.sheep {
position: absolute;
background-color: sandybrown;
width: 600px;
height: 600px;
}
.Pleasant {
position: absolute;
bottom: 50px;
width: 400px;
height: 400px;
background-color: pink;
}
.small-bell {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background-color: lightsteelblue;
}
</style>
</head>
<body>
<div class="sheep">
<div class="Pleasant">
喜羊羊
<div class="small-bell">鈴鐺</div>
</div>
</div>
</body>
</html>
子級是絕對定位的話 父級要用相對定位
使用原因:
總結:父級需要占用位置,則選相對定位.子盒子不需要占位置,則選擇絕對定位
但是不是一成不變 按需求來開發 靈活變動
實踐
使用效果
代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.box {
height: 240px;
padding: 20px 5px;
border: 1px solid coral;
}
.goods {
position: relative;
width: 200px;
height: 200px;
}
.goods .hot {
position: absolute;
top: -7px;
right: -10px;
width: 25px;
}
</style>
<body>
<div class="box">
<div class="goods">
<img class="hot" src="img/hot.png" alt="">
<img src="img/thing.png" alt="">
</div>
</div>
</body>
</html>
固定定位是元素固定于瀏覽器可視區域的位置
特點
1.以瀏覽器的可視窗口為參照點移動元素(跟父元素沒有任何關系,不隨滾動條滾動)
2.固定定位不再占有原先的位置
大廠使用案例:
實踐
效果展示
代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed</title>
</head>
<style>
.core {
width: 900px;
height: 1300px;
margin: 0 auto;
background-color: #11659a;
}
/* 固定標簽的基本用法 */
.navigation {
position: fixed;
width: 900px;
height: 50px;
background-color: darkgoldenrod;
}
/* 小技巧 固定在版心右側位置 */
/*
1.讓固定定位的盒子left:50% 走到瀏覽器可視區的一半位置
2.讓固定定位的盒子margin-left:版心寬度的一半距離(如此案例 900px寬度 一半450px 為了存在縫隙 可多些距離) 多走版心寬度的一半位置
就實現讓固定定位的盒子貼著版心右側對齊了
*/
.tag {
width: 50px;
height: 50px;
background-color: #12a182;
position: fixed;
top: 100px;
left: 50%;
margin-left: 455px;
}
</style>
<body>
<div class="core">
<div class="navigation"></div>
<div class="tag">TAG</div>
</div>
</body>
</html>
粘性定位可以被認為是相對定位和固定定位的混合
特點
大廠使用案例:
實踐
使用效果:
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed</title>
</head>
<style>
.core {
width: 900px;
height: 1300px;
margin: 0 auto;
background-color: #11659a;
}
/* 固定標簽的基本用法 */
.navigation {
position: sticky;
/* 必須存在一個偏移量 */
top: 0;
width: 900px;
height: 50px;
background-color: darkgoldenrod;
}
</style>
<body>
<div class="core">
<div class="navigation"></div>
<span>河邊蘆葦密又繁,秋深露水結成霜。意中之人在何處?就在河水那一方。</span>
<br>
<span> 逆著流水去找她,道路險阻又太長。順著流水去找她,仿佛在那水中央。</span>
<br>
<span>河邊蘆葦密又繁,清晨露水未曾干。意中之人在何處?就在河岸那一邊。</span>
<br>
<span>逆著流水去找她,道路險阻攀登難。順著流水去找她,仿佛就在水中灘。</span>
<br>
<span>河邊蘆葦密稠稠,早晨露水未全收。意中之人在何處?就在水邊那一頭。</span>
<br>
<span>逆著流水去找她,道路險阻曲難求。順著流水去找她,仿佛就在水中洲。</span>
</div>
</body>
</html>
定位模式 | 是否脫標 | 移動位置 |
static(默認) | 否 | 不能使用邊偏移 |
relative | 否(占有位置) | 相對于自身位置移動 |
absolute | 是(不占有位置) | 帶有定位的父級 |
fixed | 是(不占有位置) | 瀏覽器可視區 |
sticky | 否(占有位置) | 瀏覽器可視區 |
在使用定位布局時,可能會出現盒子重疊的情況.
可以使用z-index來控制盒子的前后次序 z軸
實踐
效果展示
代碼展示
無z-index時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div {
position: absolute;
width: 300px;
height: 300px;
}
div:nth-child(1) {
background-color: lightblue;
top: 50px;
left: 50px;
}
div:nth-child(2) {
background-color: lightpink;
top: 100px;
left: 100px;
}
div:nth-child(3) {
background-color: lightyellow;
top: 150px;
left: 150px;
}
</style>
<body>
<div>光頭強</div>
<div>熊大</div>
<div>熊二</div>
</body>
</html>
有z-index時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div {
position: absolute;
width: 300px;
height: 300px;
}
div:nth-child(1) {
background-color: lightblue;
top: 50px;
left: 50px;
/* 層級排上 */
z-index: 1;
}
div:nth-child(2) {
background-color: lightpink;
top: 100px;
left: 100px;
}
div:nth-child(3) {
background-color: lightyellow;
top: 150px;
left: 150px;
}
</style>
<body>
<div>光頭強</div>
<div>熊大</div>
<div>熊二</div>
</body>
</html>
1.絕對定位的盒子居中?
加了絕對定位的盒子不能通過margin:0 auto水平居中,但是通過計算實現水平和垂直居中
2.定位特殊特性
3.脫標的盒子不會觸發外邊距塌陷
外邊距塌陷:兩個嵌套關系的(父子關系)塊元素,當父元素有上外邊距或者沒有上外邊距(margin-top),子元素也有上外邊距的時候。兩個上外邊距會合成一個上外邊距,以相對較大的上外邊距值為準(下邊距一樣)。左右邊距不會出現這種問題。
4.絕對定位(固定定位)會完全壓住盒子
*請認真填寫需求信息,我們會在24小時內與您取得聯系。