本文是HTML及CSS課程的第九課。定位,既是将元素放置于界面的什麼位置。本文主要介紹使用 position
定位屬性給元素設定定位的幾種方式,及關于定位的其他幾點問題
文章目錄
- 一、定位的概念
-
- 1、定位是什麼
- 2、定位怎麼實作
- 二、常見定位方式
-
- 1、相對定位
- 2、絕對定位
- 3、固定定位
- 4、粘性定位
- 三、關于定位的其他幾點問題
-
- 1、浮動元素定位
- 2、行級元素定位
- 3、設定元素的堆疊順序
一、定位的概念
1、定位是什麼
定位,既是将元素放置于界面的什麼位置。定位的基本思想很簡單,它允許我們定義元素相對于其正常位置,或者相對于最近的已定位父元素,甚至浏覽器視窗的位置。
2、定位怎麼實作
在CSS中,我們通過
position
屬性實作元素的定位。
position
屬性及值的說明如下:
屬性及值 | 說明 |
---|---|
| 元素相對于其正常位置進行定位 |
| 元素相對于最近的已定位父元素進行定位 |
| 元素相對于浏覽器視窗定位 |
| 預設值。元素不浮動,按正常文檔流顯示 |
| 預設值,即沒有定位,元素遵循正常的文檔流 |
說明:
-
為static
屬性的預設值,元素會遵循正常的文檔流。當某個元素設定了樣式屬性position
并且屬性值不為position
時,我們稱該元素為一個定位元素。static
二、常見定位方式
1、相對定位
當元素的樣式屬性
position
值為
relative
時,表明該元素會進行相對定位。元素會相對于文檔流中的原來位置進行偏移。
下面是一個示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 相對定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
.d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
.d-relative {height: 50px; width: 200px; border: 10px solid lightgreen; position: relative; top: 5px; left: 20px;}
</style>
</head>
<body>
<div class="d-normal">正常的div</div>
<div class="d-relative">相對定位的div</div>
<div class="d-normal">正常的div</div>
</body>
</html>
頁面浏覽效果:
說明:
- 相對定位的元素仍然會占據自己在正常的文檔流中的位置。周圍其他元素位置并不受影響。
- 相對定位的元素,偏移量由
、top
、left
、bottom
四個屬性的值決定。right
使元素相對于原來的位置上方空出5像素,top: 5px;
使元素相對于原來的位置左方空出20像素。left: 20px;
-
和top
屬性同時設定時,bottom
屬性并不起作用;bottom
和left
屬性同時設定時,right
屬性并不起作用。right
- 如果你想讓一個元素變成定位元素,并且不改變它在文檔流中的位置,那麼,設定它的
樣式屬性為position
。relative
2、絕對定位
當元素的樣式屬性
position
值為
absolute
時,表明該元素會進行絕對定位。元素會脫離原來的文檔流,相對于最近的已定位父元素進行偏移。
下面是一個示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 絕對定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
.d-parent {height: 250px; width: 250px; border: 10px solid lightgreen; position: relative;}
.d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
.d-absolute {height: 50px; width: 200px; border: 10px solid lightgreen; position: absolute; bottom: 5px; right: 5px;}
</style>
</head>
<body>
<div class="d-parent">
<div class="d-normal">正常的div</div>
<div class="d-absolute">絕對定位的div</div>
<div class="d-normal">正常的div</div>
</div>
</body>
</html>
頁面浏覽效果:
說明:
- 絕對定位的元素将脫離原來的文檔流。周圍其他元素會忽略絕對定位元素。
- 絕對定位的元素,偏移量仍然由
、top
、left
、bottom
四個屬性的值決定。right
使元素相對于最近的已定位父元素下方空出5像素,bottom: 5px;
使元素相對于最近的已定位父元素右方空出5像素。right: 5px;
- 絕對定位元素的位置相對于最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對于最初的包含塊(可能是畫布或
标簽)。<html>
3、固定定位
當元素的樣式屬性
position
值為
fixed
時,表明該元素會進行固定定位。元素也會脫離原來的文檔流,相對于浏覽器視窗定位,看起來就像元素固定在浏覽器的視窗上,不論如何滾動頁面,它都不會移動。
下面是一個示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 固定定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
body {height: 1000px;}
.d-normal {height: 100px; width: 100px; border: 10px dotted lightsalmon;}
.d-fixed {height: 120px; width: 120px; border: 10px solid lightgreen; position: fixed; top: 50px; left: 50px;}
</style>
</head>
<body>
<div class="d-normal">正常的div</div>
<div class="d-fixed">固定定位的div</div>
</body>
</html>
頁面浏覽效果:
說明:
- 固定定位的元素也會脫離原來的文檔流。周圍其他元素會忽略固定定位元素。
- 固定定位的元素,偏移量仍然由
、top
、left
、bottom
四個屬性的值決定。right
使元素相對于浏覽器視窗上方空出50像素,top: 50px;
使元素相對于浏覽器視窗左方空出50像素。left: 50px;
- 無論使用者如何拖曳浏覽器上的滾動條,固定定位的元素都不會跟着移動。
4、粘性定位
當元素的樣式屬性
position
值為
sticky
時,表明該元素會進行粘性定位。粘性定位的元素是依賴于使用者的滾動,在
position:relative
與
position:fixed
定位之間切換。
下面是一個示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 粘性定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
body {height: 1000px;}
.d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
.d-sticky {height: 50px; width: 200px; border: 10px solid lightgreen; position: sticky; top: 5px; left: 20px;}
</style>
</head>
<body>
<div class="d-normal">正常的div</div>
<div class="d-sticky">粘性定位的div</div>
<div class="d-normal">正常的div</div>
</body>
</html>
頁面浏覽效果:
說明:
- 當浏覽器視窗中包含目标區域時,粘性定位元素的行為和相對定位
一樣; 而當頁面滾動超出目标區域時,它的表現就像固定定位position:relative
,固定在浏覽器視窗的目标位置。position:fixed
- 粘性定位的元素,偏移量仍然由
、top
、left
、bottom
四個屬性的值決定。right
使元素相對于原來的位置(或浏覽器視窗)上方空出5像素,top: 5px;
使元素相對于原來的位置(或浏覽器視窗)左方空出20像素。left: 20px;
三、關于定位的其他幾點問題
1、浮動元素定位
這裡示範當一個元素已經設定浮動後,再設定定位屬性會有什麼效果。
下面是一個示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 給浮動元素設定定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
.d1, .d2, .d3 {height: 120px; width: 120px; border: 10px dotted lightsalmon; float: left;}
.d-position {position: relative; top: 20px; left: 20px;}
</style>
</head>
<body>
<div class="d1">向左浮動</div>
<div class="d2 d-position">向左浮動,同時定位</div>
<div class="d3">向左浮動</div>
</body>
</html>
頁面浏覽效果:
說明:
- 當一個元素為浮動元素,同時設定定位屬性時,元素仍然遵守相應的定位規則,相對于其浮動位置,或者最近的已定位父元素,或者浏覽器視窗的位置進行定位。
2、行級元素定位
這裡示範給行标簽設定定位屬性的效果。
下面是一個示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 行級元素定位 </title>
<style>
body {height: 1000px;}
* {margin: 0; border: 0; padding: 0;}
.d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
.span-relative {border: 10px solid lightgreen; position: relative; top: 5px; left: 20px;}
</style>
</head>
<body>
<div class="d-normal">正常的div</div>
<span class="span-relative">相對定位的span</span>
<div class="d-normal">正常的div</div>
</body>
</html>
頁面浏覽效果:
說明:
- 給行級标簽設定定位屬性,元素仍然遵守相應的定位規則。行級元素定位後并不會變成塊級元素。
3、設定元素的堆疊順序
元素經過定位後,有可能顯示在浏覽器視窗中時出現位置重疊的現象,預設情況下,在HTML檔案中後出現的元素将會覆寫前面的元素。我們可以通過CSS中的
z-index
屬性調整元素的堆疊順序。
下面是一個示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 調整元素的堆疊順序 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
.d1, .d2 {width: 100px; height: 100px; position: relative;}
.d1 {background-color: lightgreen; z-index: 1;}
.d2 {background-color: lightsalmon; top: -50px; left: 50px;}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
頁面浏覽效果:
說明:
- 樣式屬性
的屬性值一般設定一個整數,該整數值越大,表示元素離我們的視線越近。z-index
- 樣式屬性
隻能用在定位元素上。z-index