css的position怎麼使用

我們常常使用position來用於層級的絕對位置，那麼怎樣才能熟練的掌握用CSS來操作position這個屬性呢？今天我們來和大家好好研究一下。

position文法與結構

position文法：

position : static absolute relative

position參數：

static : 　無特殊定位，對象遵循HTML定位規則

absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對位置。而其層疊通過css z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框

relative : 　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中位移位置

position說明：

設定對象的定位方式，可以讓布局層容易位置絕對位置，控制盒子物件更加準確。

position實際用處

絕對位置position用於定位盒子物件，有時一個布局中幾個小對象，不易用css padding、css margin進行相對定位，這個時候我們就可以使用絕對位置來輕鬆搞定。特別是一個盒子裡幾個小盒子不規律的布局，這個時候我們使用position絕對位置非常方便布局對象。

絕對位置position示範適用圖、不規律布局，為即可利用position:absolute；position:relative進行絕對位置

絕對位置與float浮動不能同時使用，比如一個大盒子裡有的是絕對位置，有的是使用css float浮動定位，這樣IE6瀏覽器將不會顯示改大對象裡的這些絕對位置與相對定位，這也算是IE6 CSS HACK吧，注意不要混用即可。

絕對位置使用條件

position:absolute；position:relative絕對位置使用通常是父級定義position:relative定位，子級定義position:absolute絕對位置屬性，並且子級使用left或right和top或bottom進行絕對位置。

.div{position:relative} 定義，通常最好再定義CSS寬度和CSS高度

.div-a{position:absolute;left:10px;top:10px} 這裡定義了距離父級左側距離間距為10px，距離父級上邊距離為10px

或

.div-a{position:absolute;right:10px;bottom:10px} 這裡定義了距離父級靠右距離10px,距離父級靠下邊距離為10px

對應HTML結構

<div class="div">    <div class="div-a"></div></div>

這樣就絕對位置了“div-a”在父級“div”盒子內。

注意的是，left（左）和right（右）在一個對象只能選一種定義，bottom（下）和top（上）也是在一個對象只能選一種定義。

position應用案例

這裡為大家執行個體應用position絕對位置，我們設定一個最外層盒子css邊框為紅色，css width為400px,css height為200px,內部包含了2個盒子，為就用絕對位置這2個盒子，第一個盒子CSS命名為“div-a”,其寬度為100px,背景顏色為黑色，高度為100px,定位距離父級上為10px，距離左為10px;第二個盒子CSS類命名為“div-b”，其寬度和高度分別為50px,css背景顏色為藍色，距離父級下距離為13px,距離父級右邊為15px。

1、css代碼如下

<style> .div{ position:relative;width:400px;height:200px; border:1px solid #000} /* 定義父級position:relative 為就認為是絕對位置聲明吧 */ .divc-a{ position:absolute;width:100px;height:100px; left:10px;top:10px;background:#000} /* 使用絕對位置position:absolute樣式 並且使用left top進行定位位置 */ .div-b{ position:absolute;width:50px;height:50px; right:15px;bottom:13px;background:#00F} /* 使用絕對位置position:absolute樣式 並且使用right bottom進行定位位置 */ </style>

html程式碼片段

<div class="div">     <div class="div-a"></div>     <div class="div-b"></div> </div>

CSS的position屬性的使用方法就這麼多，需要的朋友可以儲存一下，也請大家持續關注本站的其他更新。

相關閱讀：

幾種純css製作的小功能執行個體

HTML裡常用的連結標記註解

為什麼有時候DIV CSS載入失敗