帶你走進CSS定位詳解

學習CSS相關知識，定位是其中的重點，也是難點之一，如果不瞭解css定位有時候都不知道怎麼用，下面整理了一下關於定位屬性的具體理解和應用方案。

一：定位

定位屬性列表

• position
• top
• bottom
• right
• left
• z-index

position

基本語法：

position：static | absolute | fixed | relative

語法介紹：

1. static：預設值，無特殊定位。
2. absoulte：相對於其最近的一個定位設定的父物件進行絕對定位，可用left,right,top,bottom。
3. fixed：生成絕對定位的元素。
4. relative：生成相對定位的元素，可通過left,right,top,bottom屬性設定相對於自身偏移位置。

程式碼：

div { position:relative; top:-4px } 

bottom

基本特殊：定位元素

基本語法：bottom：auto | length

語法

1. auto：預設值，無特殊定位。
2. length：長度值 | 百分比，必須定義position的屬性值為absolute或者relative才有效。

程式碼：

div { position:relative; bottom:6px; }   

z-index

語法：z-index：auto | number
取值：auto：預設值，number：無單位的整數值，可負數。

程式碼：

div { position:absolute; z-index:5; width:6px; } 

left

基本語法：left：auto | length

1. auto：預設值，無特殊定位。
2. length：長度值 | 百分比，必須定義position的屬性值為absolute或者relative才有效。

程式碼：

div { position:relative; top:-3px; left:6px; }   

top

基本語法：top：auto | length

1. auto：預設值，無特殊定位。
2. length：長度值 | 百分比，必須定義position的屬性值為absolute或者relative才有效。

程式碼：

div { position:relative; top:-3px; left:5px;}

right

基本語法：right：auto | length

1. auto：預設值，無特殊定位。
2. length：長度值 | 百分比，必須定義position的屬性值為absolute或者relative才有效。

程式碼：

div { position:relative; top:-3px; right:6px}

相對定位

relative生成相對定位的元素，相對於其它位置進行定位。

程式碼：

<style type="text/css">
        #box1 {
            margin: 10px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #box2 {
            margin: 10px;
            width: 100px;
            height:100px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
    </style>

<div id="box1"></div>
<div id="box2"></div>

絕對定位

絕對定位相對於它的參照物移動位置，如果沒有，預設為body為參照物。

結語

• 帶你走進CSS定位詳解，多試試，熟能生巧嘛~