通俗講解定位(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)