整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
次我們來說一下，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://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對兔子圖片起作用，我沒有給貓添加任何樣式，貓圖片只是作為參照物。
SS定位機制
CSS 有三種基本的定位機制：相對定位、浮動和絕對定位。
相對定位
相對定位指的是設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。
如果將box2的框 top 設置為 50px，那么框將在原位置頂部下面 50 像素的地方。如果 left 設置為 20 像素，那么會在元素左邊創建 20 像素的空間，也就是將元素向右移動。
只要box2設置了position為relative ，box1和box3始終不會因為box2的改變而改變。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>相對定位</title>
<style type="text/css">
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2 {
position: relative;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
1.當都不設置浮動時：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>浮動</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body></html>
2.當設置box1向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了box1 2，使box12 從視圖中消失。
<!DOCTYPE html><html lang="en">
<head><meta charset="utf-8">
<title>不設置浮動</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
} .box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
.box1 {
float:left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>
3.當都設置為浮動時，box1 向左浮動直到碰到包含框，另外兩個box向左浮動直到碰到前一個浮動框。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>不設置浮動</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
overflow: hidden;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>
4.清除浮動，要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
詳細的可以參考：http://www.w3school.com.cn/css/css_positioning_floating.asp
絕對定位
設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。
因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素?？梢酝ㄟ^設置 z-index 屬性來控制這些框的堆放次序。
當設置box2的position為absolute時，它就會脫離文檔，相當于不存在。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>絕對定位</title>
<style type="text/css">
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2 {
position: absolute;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body></html>
文/丁向明
做一個有博客的web前端自媒體人，專注web前端開發，關注用戶體驗，加我qq/微信交流：6135833
http://dingxiangming.com
CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素后面，并指定一個元素的內容太大時，應該發生什么。
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決于定位方法。
HTML元素的默認值，即沒有定位，元素出現在正常的流中。
靜態定位的元素不會受到top, bottom, left, right影響。
元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<head>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> 代碼使人進步！??！.</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</body>
</html>注意：
Fixed定位使元素的位置與文檔流無關，因此不占據空間。
Fixed定位的元素和其他元素重疊。
相對定位元素的定位是相對其正常位置。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title> 定位</title>
<head>
<style>
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
</style>
</head>
<body style="background-color:azure;">
<p>Some more text</p>
<p><b>Note:</b> 代碼使人進步！！！.</p>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
</body>
</html>可以移動的相對定位元素的內容和相互重疊的元素，它原本所占的空間不會改變。
h2.pos_top{
position:relative;
top:-50px;
}相對定位元素經常被用來作為絕對定位元素的容器塊。
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>:
h2{
position:absolute;
left:100px;
top:150px;
}Absolutely定位使元素的位置與文檔流無關，因此不占據空間。
Absolutely定位的元素和其他元素重疊。
元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）
一個元素可以有正數或負數的堆疊順序：
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意： 如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。
本文基于Html基礎，主要介紹了CSS中四種定位的方式。對于四種的定位表現形式，用豐富的案例 ，代碼效果圖的展示，幫助大家更好理解 。
最后，希望可以幫助大家更好的學習CSS3。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
