CSS(8)—通俗講解定位(position)
CSS有三種基本的定位機制: 普通流、浮動、定位。前面兩個之前已經講過，詳見博客：
1、
2、
3、
一、為什麼要用定位？
如果說浮動關鍵在一個 “浮” 字上面， 那麼 我們的定位，關鍵在於一個 “位” 上。
我們來思考下定位用於的場景。
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、
2、
你如果願意有所作為，就必須有始有終。(10)本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】
※USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能
※評比前十大台北網頁設計、台北網站設計公司知名案例作品心得分享
※智慧手機時代的來臨，RWD網頁設計已成為網頁設計推薦首選
