[轉]總結一下CSS中的定位 Position 屬性

時間 2019-12-13

標籤總結一下 css 定位 position 屬性欄目 CSS 简体版

原文原文鏈接

在CSS中，Position 屬性常常會用到，主要是絕對定位和相對定位，簡單的使用都沒有問題，尤爲嵌套起來，就會有些混亂，今記錄總結一下，防止久而忘之。

CSS position 屬性值：

absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative：生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。
static：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
inherit：規定應該從父元素繼承 position 屬性的值。

咱們最經常使用的的就是 absolute 和 relative 兩種方式，因此主要討論着二者的區別。css

relative 相對定位

相對定位咱們主要是要知道相對於誰來進行偏移的？其實相對定位是相對於元素本身的自己的位置，咱們來看一下例子： html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html body
        {
            margin: 0px;
            padding: 0px;
        }
        #parent
        {
            width: 200px;
            height: 200px;
            border: solid 5px black;
            padding: 0px;
            position: relative;
            background-color: green;
            top: 15px;
            left: 15px;
        }
        #sub1
        {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #sub2
        {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="sub1">
        </div>
        <div id="sub2">
        </div>
    </div>
</body>
</html>

這是一個嵌套的DIV，一個父Div Parent，包含兩個子DIV Sub1 和 Sub2，因爲兩個子DIV沒有設置任何Position屬性，它們處於它們應當的位置。默認位置以下圖：瀏覽器

當咱們修改一下Div Sub1 的樣式： post

#sub1
{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    top: 15px;
    left: 15px;
}

結果以下圖：咱們會發現Sub1進行了偏移，並不影響Sub2的位置，同時遮蓋住了Sub2，切記偏移並非相對於 Div Parent的，而是相對於Sub1 原有的位置。url

若是咱們把Sub1 的同級Div Sub2 也設置一個相對位置，會產生什麼結果？咱們來看一下。spa

#sub2
{
   width: 100px;
   height: 100px;
   background-color: red; 
   position: relative;
   top: 10px;
   left: 10px;                  
}

結果以下圖：3d

Sub2也根據原有位置進行了偏移，同時遮蓋住了Sub1，也不會影響Sub1的位置。相對定位比較容易理解，咱們再來看一下絕對定位Absolute。code

absolute 絕對定位

絕對定位在使用當中比較容易出錯的，有幾個須要注意的地方，將上面的代碼還原，咱們爲Sub1 增長一個絕對定位。xml

#sub1
{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 15px;
    left: 15px;
}

結果以下：htm

咱們發現，因爲咱們對Sub1進行了絕對定位，Sub1的位置發生了偏移，而同級Div Sub2，則佔據了Sub1的位置，而且Sub1遮擋了Sub2.

下面，把Sub2 也增長絕對定位：

#sub2
{
     width: 100px;
     height: 100px;
     background-color: red;    
     position: absolute;
     top: 10px;
     left: 10px;              
}

結果以下：

咱們會發現，Sub2 也進行了偏移，而且遮蓋住了Sub1。

這時候，咱們會發現問題，兩個子Div 都設置了絕對定位，他們是相對於哪一個元素髮生了偏移呢？

這分兩種狀況：

一、若是Sub1 的父元素或者祖父元素，設置了Position屬性，而且屬性值爲 absolute 或 relative的時候，那麼子元素相對於父元素來進行定位。好比咱們例子中最外層Div Parent設置了相對定位屬性，所以Sub1 和 Sub2 兩個Div 就根據 Div Parent 來進行定位。可是根據Parent那個定位點進行定位呢？答案是：若是parent設定了margin，border，padding等屬性，那麼這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位。

二、若是sub1不存在一個有着position屬性的父對象，那麼那就會以body爲定位對象，按照瀏覽器的窗口進行定位。

咱們將例子中的Parent 的Position 屬性刪除，再來看一下結果：

因爲兩個子div沒有找到有Position屬性的父元素，則以Body進行定位，因爲圖片緣由，請不要誤覺得是相對於Parent的。

fixed 定位方式

fixed是一種特殊的absolute，fixed老是以body爲定位對象的，按照瀏覽器的窗口進行定位。咱們將代碼還原到最初狀態，Sub1 增長absolute定位方式，而Sub2 增長fixed定位方式：

#sub1
{
   width: 100px;
   height: 100px;
   background-color: blue;
   position: absolute;
   top: 15px;
   left: 15px;
}
#sub2
{
   width: 100px;
   height: 100px;
   background-color: red;    
   position: fixed;
   top: 5px;
   left: 5px;              
}

結果以下：

會發現Sub2 始終以body 進行定位，而Sub1因爲發現Parent 有position屬性relative，則根據父元素進行定位偏移。

注意fixed 在IE 低版本中式不支持的，包括IE6

至於 static 和 inherit 兩種定位，項目中不多用到，static 就是Position屬性的默認值，通常不設置position屬性時，會按照正常的文檔流進行排列。這裏就不在贅述。

做者： Rising Sun

出處： http://www.cnblogs.com/lxblog/

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利.