首頁 > 開發者 > CSS

css 元素定位position樣式學習筆記

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

曾經寫網頁，學css整體上不難，但就是元素定位，始終一知半解，直到今天，本著實踐出真知的理念，經過認真測試，總結出了如下結論。

css 定位： position
static : 預設靜止定位，元素在正常的文檔流中無法移動定位。
absolute :獨立元素，元素從文檔流中脫離,會相對於父層(static定位的父層除外)移動定位。
relative : 相對定位，相對本身的位置移動定位，效果等同於相對於父層移動定位。
fixed: 固定定位，相對於視窗移動定位。

注:
1、移動定位是指通過 top,bottom,left,right屬性來移動元素位置。

2、任何元素都有相對於父層定位的特性,所以當不用方向移動定位屬性,而只用 margin 定位,則必然是相對的位移。

3、absolute 是“獨立的，絕對”的意思，我覺得應該是取“獨立的”意義更好理解。它所達到的效果就是元素從文檔流中脫離，印證了獨立存在的意義。

 測試結果如下（static元素就不測試）：

子項目 ( 相對於 =>) 父元素
absolute => static 絕對
fixed => static 絕對
relative => static 相對

absolute => absolute 相對
fixed => absolute 絕對
relative => absolute 相對

absolute => relative 相對
fixed => relative 絕對
relative => relative 相對

absolute => fixed 相對
fixed => fixed 絕對
relative => fixed 相對
簡述CSS樣式表元素的定位

1. position:static|無定位

position:static是所有元素定位的預設值, 一般不用註明，除非有需要取消繼承的別的定位

example:

 代碼如下 複製代碼

#div-1 {
position:static;
}

2. position:relative|相對定位

使用position:relative，就需要top,bottom,left,right4個屬性來配合，確定元素的位置。

如果要讓div-1層向下移動20px,左移40px:

example:

 代碼如下 複製代碼

#div-1 {
position:relative;
top:20px;
left:40px;
}

如果用到相對定位，緊隨他的層divafter是不會出現在div-1的下方，而是和div-1在同一個高度出現。

可見， position:relative;並不是很好用。

3. position:absolute|絕對位置

使用position:absolute;,能夠很準確的將元素移動到你想要的位置，

讓我將 div-1a 移動到頁面的右上方:

example:

 代碼如下 複製代碼

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

使用絕對位置的div-1a層前面的或者後面的層會認為這個層並不存在，絲毫不影響到他們。所以position:absolute;用於將一個元素放到固定的位置很好用，但是如果需要div-1a層相對於附近的層來確定位置就不要實現了。

*這裡有個Win IE的bug需要提到，就是如果為絕對位置的元素定義一個相對的寬度，那麼在IE下它的寬度取決於父元素的寬度而不是整個頁面的寬度。

4. position:relative + position:absolute|絕對位置+相對定位

如果給父元素(div-1)定義為position:relative;子項目(div-1a)定義為position:absolute，那麼子項目(div-1a)的位置將相對於父元素(div-1)，而不是整個頁面。

讓div-1a定位於div-1的右上方：

example:

 代碼如下 複製代碼

<div id="div-1">
<div id="div-1a">
this is div-1a element.
</div>
this is div-1 element.
</div>
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

5. two column layout|兩列布局

讓我們實踐position:relative + position:absolute的理論，實現兩列布局。

example:

 代碼如下 複製代碼
<div id="div-1">
<div id="div-1a">this is the column-one</div>
<div id="div-1b">this is the column-two</div>
</div>
#div-1 {
position:relative;/*父元素相對定位*/
}
#div-1a {
position:absolute;/*子項目絕對位置*/
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;/*子項目絕對位置*/
top:0;
left:0;
width:200px;
}

注意，在這個例子中會發現父元素的告訴不會隨著子項目的告訴變化，所以如果父元素的背景和邊框需要定義一個足夠高的高度才能顯示出來。

6.float|浮動對齊

使用float定位一個元素有float:left;&float:right;兩種值。這種定位只能在水平座標定位，不能在垂直座標定位。而且讓下面的元素浮動環繞在它的左邊或者右邊。

example:

 代碼如下 複製代碼

#div-1a {
float:left;
width:200px;
}

7.make two clumn with float|浮動實現兩列布局

如果讓一個元素float:left;另一個float:right;控制好他們的寬度，就能實現兩列的布局效果。

example:

 代碼如下 複製代碼

#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

8.clear float|清除浮動

如果你不想讓使用了float元素的下面的元素浮動環繞在它的周圍，那麼你就使用clear,clear有三個值，clear:left;(清除左浮動)，clear:right;(清除右浮動)，clear:both;(清除所有浮動)。

example:

 代碼如下 複製代碼

<div id="div-1a">this is div-1a</div>
<div id="div-1b">this is div-1b</div>
<div id="div-1c">this is div-1c</div>
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

至此，這個css的定位部分就結束了，你可以動手體會體會加深印象。

用於設定相對和絕對位置元素的"內外"位置,數值越小的在最內層,外層的將覆蓋內層

例子

 

 代碼如下 複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN"
"http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net /1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;
        charset=gb2312" />
        <title>Div + CSS Example, Wayhome's Blog</title>
        <style type="text/css">
            <!--
            body,td,th{font-family:Verdana;font-size:9px;}
            -->
    </style></head>
    <body>
        <div style="position:absolute; top:5px; right:20px; width:200px;
            height:180px; background:#00FF00;">
            position: absolute;<br />
            top: 5px;<br />
            right: 20px;<br />
            <div style="position:absolute; left:20px; bottom:10px;
                width:100px; height:100px; background:#00FFFF;">
                position: absolute;<br />

                left: 20px;<br />
                bottom: 10px;<br />
            </div>
        </div>
        <div style="position:absolute; top:5px; left:5px; width:100px;
            height:100px; background:#00FF00;">
            position: absolute;<br />
            top: 5px;<br />
            left: 5px;<br />
        </div>
        <div style="position:relative; left:150px; width:300px; height:50px;
            background:#FF9933;">
            position: relative;<br />
            left: 150px;<br />
            <br />
            width: 300px; height: 50px; <br />
        </div>
        <div style="text-align:center; background:#ccc;">
            <div style="margin:0 auto; width:600px;
                background:#FF66CC; text-align:left;">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <div style="padding:20px 0 0 20px; background:#FFFF00;">
                    padding: 20px 0 0 20px;
                    <div style="position:absolute; width:100px; height:100px;
                        background:#FF0000;">position: <span style="color:#fff;
                            ">absolute</span>;</div>
                    <div style="position:relative; left:200px; width:500px;
                        height:300px; background:#FF9933;">
                        position: <span style="color:blue;">relative</span>;<br
                        />
                        left: 200px;<br />
                        <br />
                        width: 300px;<br />
                        height: 300px;<br />
                        <div style="position:absolute; top:20px; right:20px;
                            width:100px; height:100px; background:#00FFFF;">
                            position: absolute;<br />
                            top: 20px;<br />
                            right: 20px;<br /></div>
                        <div style="position:absolute; bottom:20px; left:20px;
                            width:100px; height:100px; background:#00FFFF;">
                            position: absolute;<br />
                            bottom: 20px;<br />
                            left: 20px;<br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

絕對位置使用條件

position:absolute；position:relative絕對位置使用通常是父級定義position:relative定位，子級定義position:absolute絕對位置屬性，並且子級使用left或right和top或bottom進行絕對位置。
.divcss5{position:relative} 定義，通常最好再定義CSS寬度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 這裡定義了距離父級左側距離間距為10px，距離父級上邊距離為10px
或
.divcss5-a{position:absolute;right:10px;bottom:10px} 這裡定義了距離父級靠右距離10px,距離父級靠下邊距離為10px
對應HTML結構

 代碼如下 複製代碼
<div class="divcss5">
    <div class="divcss5-a"></div>
</div>

這樣就絕對位置了“divcss5-a”在父級“divcss5”盒子內。
注意的是，left（左）和right（右）在一個對象只能選一種定義，bottom（下）和top（上）也是在一個對象只能選一種定義。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More