CSS(8)---通俗講解定位(position)
CSS(8)---通俗講解定位(position)
CSS有三種基本的定位機制: 普通流
、浮動
、定位
。前面兩個之前已經講過,詳見部落格:
1、CSS(5)---通俗講解盒子模型
2、CSS(6)---通俗講解浮動(float)
3、CSS(7)--- 通俗講解清除浮動
一、為什麼要用定位?
如果說浮動關鍵在一個 “浮” 字上面, 那麼 我們的定位,關鍵在於一個 “位” 上。
我們來思考下定位用於的場景。
1、打Log標籤
比如你想在商品的圖片想打個標籤比如:包郵、最新上架等等。
怎麼做比較好呢,如果你要粗暴那就直接ps在圖片上新增標籤。只是這樣有個很大的弊端,比如你要新增新標籤你需要重現修圖,比如商品之前包郵後面不包郵了,
那你又需要重新p圖。這樣肯定是不合適的。那怎麼做比較合適?
其實很簡單,將商品圖片和標籤的標籤分開來。然後通過css在商品圖片上新增標籤。這個時候通常會定位去完成。
2、切換Banner
有些商城的首頁都會有個Banner,這裡 左右的箭頭 和 下面的小點點一般也是用定位來做。
3、廣告位視窗
有些位置在左右側會有固定的廣告視窗,不論怎麼滑動頁面這個廣告視窗都是在固定位置
這個就需要用到固定定位了。
二、定位概念
1、定位的分類
在CSS中,position
屬性用於定義元素的定位模式,其基本語法格式如下:
選擇器 {position:屬性值;}
屬性值
這裡還有個概念就是 邊偏移
所以定位是要和邊偏移搭配使用
的。不過對於static(靜態定位)設定邊偏移是無用的。
2、靜態定位(static)
static 是此屬性的預設值。這時候,我們稱那個元素沒有被定位。簡單來說就是網頁中所有元素都預設的是靜態定位。 其實就是標準流的特性。
所以如果需要使用定位那這裡就不能是這個預設值了。
注意
在靜態定位狀態下,此時 top, right, bottom, left 和 z-index 屬性無效。
3、相對定位(relative)
它的主要特點如下
1、 參照元素原來的位置進行移動。 2、 通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位。 3、 元素原有的空間位保留。 4、 元素在移動時會蓋住其他元素。
舉例說明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style type="text/css">
#one {
width: 120px;
height: 120px;
background: #E19D59;
}
#two {
width: 120px;
height: 120px;
background: #FF0000;
position: relative; /*設定相對定位*/
left: 20px; /*設定距離左邊偏移位置*/
top: 20px; /*設定距離頂部偏移位置*/
}
#three {
width: 120px;
height: 120px;
background: #008000;
}
</style>
</head>
<body>
<div id="one">div1</div>
<div id="two">div2</div>
<div id="three">div3</div>
</body>
</html>
執行結果
通過我們這個示例我們可以看出
1、它的左右,上下邊偏移的量是根據這個div2原始位置基礎上進行移動的。
2、這個div2它還是個標準流,並沒有浮起來,所以這個位置它還是佔有的。(如果div2浮動那麼div3就會向上移動,這裡顯然沒有)
3、當它偏移後 如果和其它元素有重疊,它會覆蓋其它元素。(div2覆蓋了部分div3元素)
作用
我的理解相對定位主要用途是用來給絕對定位的一個盒子。(下面會解釋這句話)
4、絕對定位absolute
特點
1、參照距離他最近的有定位屬性的父級元素進行移動
2、通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位
3、元素完全脫離文件流,原有位置不再保留
4、元素在移動時會蓋住其他元素
5、一般我們設定絕對定位時,都會找一個合適的父級將其設定為相對定位。最好為這個具有相對定位屬性的父級設定寬高
舉例說明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 400px;
height: 400px;
margin: 100px;
/* position: relative;*/
background: yellow;
}
#bd1{
width: 120px;
height: 120px;
background: #E19D59;
}
#bd2{
width: 120px;
height: 120px;
background: #FF0000;
position: absolute;
left: 20px;
top: 20px;
}
#bd3{
width: 120px;
height: 120px;
background: #008000;
}
</style>
</head>
<body>
<div id="father">
<div id="bd1">div1</div>
<div id="bd2">div2</div>
<div id="bd3">div3</div>
</div>
</body>
</html>
執行結果
從這幅圖可以看出一點
這裡因為父div沒有設定定位,所以它的位置是相對於body進行邊偏移。
這個時候我們將父標籤設定 position: relative
;
再重新整理頁面
從這張圖很直觀看到:
1、因為父div設定了定位,所以這裡的邊偏移變成都是相對於父div進行偏移(正常貼標籤就是這樣)
2、我們可以看出當設定絕對定位後,該元素已經脫離文件流,已經浮上來了(因為div2上浮所有div3才會上移)
3、元素在移動時會蓋住其他元素 (div2覆蓋了部分div3)
5、固定定位(fixed)
特點
1、以body為定位時的物件,總是根據瀏覽器的視窗來進行元素的定位
2、通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位
3、元素完全脫離文件流,原有位置不再保留
4、元素不會隨著文件流的滑動而滑動
固定定位最大的特點就是第一點,可以理解成它是以可視區域為準,會一直顯示在可視區域,螢幕滑動也會顯示在定位的位置。
6、四種定位總結
還有比較重要的三點
定位模式轉換
跟 浮動一樣, 元素添加了 絕對定位和固定定位之後, 元素模式也會發生轉換, 都自動轉換為 行內塊元素。
絕對定位的盒子水平/垂直居中
注意 普通的盒子是左右margin 改為 auto就可, 但是對於絕對定位就無效了。
定位的盒子也可以水平或者垂直居中,有一個演算法(下面會舉例說明)。
1. 首先left 50% 父盒子的一半大小
2. 然後走自己外邊距負的一半值就可以了 margin-left。
子絕父相
這句話的意思是 子級是絕對定位的話,父級要用相對定位
。
為什麼會有這個概念,那是因為絕對定位的邊偏移特點是
如果父元素沒有設定定位,那麼它的位置是相對於body進行邊偏移。如果父元素設定定位,那就根據父元素偏移。
一般我們肯定是希望根據父元素偏移。就好比圖片打標籤,不可能跟著body偏移而是父元素進行定位。而且父元素相對定位最大的好處就是它會佔有位置,因此父親最好是 相對定位。
三、經典示例
1、打上log標記
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>log標籤</title>
<style>
div {
width: 310px;
height: 190px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative; /*父選擇相對定位*/
}
.top {
position: absolute; /*子取相對定位*/
top: 0; /*位置 左上*/
left: 0;
}
</style>
</head>
<body>
<div>
<img src="images/log.jpg" alt="" class="top"> <!-- log的圖片 -->
<img src="images/goods.jpg" height="190" width="310" alt=""> <!-- 商品圖片,長和寬和父div大小一致 -->
</div>
</body>
</html>
執行結果就是上面的最終結果。
2、定位水平居中
加了定位 浮動的的盒子 margin 0 auto 失效了
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
/*加了定位 浮動的的盒子 margin 0 auto 失效了*/
left: 50%;
margin-left: -100px; /*減去總寬度一般*/
top: 50%;
margin-top: -100px; /*減去總高度一般*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
這個這個div就處於整個頁面的居中了,這裡我們來說明下下面這兩個的意思
left: 50%;
margin-left: -100px; /*減去總寬度一般*/
3、輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tb {
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
position: relative;
}
.tb a {
width: 24px;
height: 36px;
display: block;
position: absolute;
top: 50%;
margin-top: -18px;
}
.left {
left: 0;
background: url(images/left.png) no-repeat;
}
.right {
right: 0;
background: url(images/right.png) no-repeat;
}
.tb ul {
width: 70px;
height: 13px;
background: rgba(255, 255, 255, .3);
position: absolute; /* 加定位*/
bottom: 18px;
left: 50%; /*水平走父容器的一半*/
margin-left: -35px; /*左走自己的一半*/
border-radius: 8px;
}
.tb ul li {
width: 8px;
height: 8px;
background-color: #fff;
float: left;
margin: 3px;
border-radius: 50%;
}
.tb .current {
background-color: #f40;
}
</style>
</head>
<body>
<div class="tb">
<img src="images/tb.jpg" >
<a href="#" class="left"></a>
<a href="#" class="right"></a>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
執行結果
參考
1、w3school之CSS 定位 (Positioning)
2、CSS 定位(postion、z-index)
你如果願意有所作為,就必須有始有終。(10)
<