web前端學習筆記(CSS盒子的定位)

時間 2019-11-05

標籤 web 前端學習筆記 css 盒子定位欄目 HTML 简体版

原文原文鏈接

相對定位css

使用相對定位的盒子的位置常以標準流的排版方式爲基礎，而後使盒子相對於它在本來的標準位置偏移指定的距離。相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。
使用relative，即相對定位，除了將position屬性設置爲relative以外，還須要指定必定的偏移量，水平方向經過left或者right屬性來指定，豎直方向經過top和bottom來指定。如下爲後面實驗的基準代碼。html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>position屬性</title>
<style type="text/css">
body{
    margin:20px;
    font :Arial 12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}
#block1{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
}
</style>
</head>
<body>
    <div id="father">
        <div id="block1">Box-1</div>
    </div>
</body>
</html>

這是一個很簡單的標準流方式的兩層的盒子，頁面的效果以下圖：瀏覽器

實驗一：一個子塊的狀況 ui

下面的CSS樣式代碼中的Box-1處，將position屬性設置爲relative，並設置偏移距離，代碼以下： spa

#block1 {
    backgroud-color: #fff0ac;
    border: 1px dashed #000000;
    padding: 10px;
    position: relative;
    left: 30px;
    top: 30px;
}

下圖能夠看出Box-1和原來的位置相比，它向右和向下分別移動了30像素，也就是說，「left:30px」的做用就是使Box-1的新位置在它原來位置的左邊框右側30像素的地方，「top:30px」的做用就是使Box-1的新位置在原來位置的上邊框下側30像素的地方。設計

這裏用到了top和left這兩個CSS屬性，實際上在CSS中一共有4個配合position屬性使用的定位屬性，除top和left以外，還有right和bottom。這4個屬性只有當position屬性設置爲absolute、relative和fixed時纔有效。並且，在position屬性取值不一樣時，它們的含義也不一樣。當position設置爲relative時，它們表示各個邊界與原來位置的距離。
top、right、bottom和left這4個屬性除了能夠設置爲絕對的像素數，還能夠設置爲百分數。此時，能夠看到子塊的寬度依然是未移動前的寬度，撐滿未移動前父塊的內容。只是向右移動了，右邊框超出了父塊。所以，還能夠得出另外一個結論，當子塊使用相對定位之後，它發生了偏移，即便移動到了父盒子的外面，父盒子也不會變大，就好像子盒子沒有變化同樣。相似的，若是將偏移的數值設置爲：right:30px; bottom:30px，其效果圖以下：3d

如今咱們能夠獲得這樣的結論，使用相對定位的盒子，會相對於它本來的位置，經過偏移指定的距離，到達新的位置。而該相對定位的盒子則仍然位於標準流中，它對父塊沒有任何影響。 code

實驗二：兩個子塊的狀況 xml

下面討論的是兩個子塊的狀況。把上面的基礎代碼改成以下代碼，在父div中放兩個子div。首先對它們都不設置任何偏移。htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<title>position屬性</title>
<style type="text/css">
body{
    margin:20px;
    font-family:Arial;
    font-size:12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}
#father div{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
}
#block1{
}
#block2{
}
</style>
</head>
<body>
    <div id="father">
        <div id="block1">Box-1</div>
        <div id="block2">Box-2</div>
    </div>
</body>
</html>

效果圖顯示以下：

從上面的代碼中能夠看出，如今對兩個子塊的設置還都空着。下面首先將Box-1盒子的CSS設置爲：

#block1 {
    position: relative;
    bottom: 30px;
    right: 30px;
}

將子塊1的position屬性設置成了relative，子塊2尚未設置任何與定位相關的屬性。此時的效果以下圖，與前面的圖相比能夠看到子塊1的位置以自身爲基準向上和向左各偏移了30像素。而子塊2和前面的圖相比沒有任何變化，就好像子塊1還在原來的位置上。

這一次又驗證了前面實驗1中總結出的結論，而且須要進行一小點兒的改進。由於，使用相對定位的盒子不只對父塊沒有任何影響，對兄弟盒子也沒有任何影響。那麼若是同時設置兩個子塊的position都設置爲relative，狀況又會如何呢？如今把子塊2也進行相應的設置，代碼以下：

上面的實驗是針對標準流方式進行的，實際上，對浮動的盒子使用相對定位也是同樣的，都會相對於原有的位置進行指定的偏移併到達新的位置，而這一偏移並不會對其後面的兄弟元素帶來任何的影響。

絕對定位

在瞭解了相對定位以後，下面開始分析absolute定位方式，它表示絕對定位。經過上面的例子能夠了解到position屬性須要經過配合偏移必定的距離來實現定位，而其中核心的問題就是以什麼做爲偏移的基準。絕對定位，盒子的位置以它的包含框爲基準進行偏移。絕對定位的盒子從標準流中脫離。這意味着它們對其後的兄弟盒子的定位沒有影響，其它的盒子就好像這個盒子不存在同樣。如下爲後面實驗的基準代碼。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>absolute屬性</title>
<style type="text/css">
body{
    margin:20px;
    font-family:Arial;
    font-size:12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}
#father div{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
}
#block2{
}
</style>
</head>
<body>
    <div id="father">
        <div >Box-1</div>
        <div id="block2">Box-2</div>
        <div >Box-3</div>
    </div>
</body>
</html>

效果圖以下。能夠看到一個父div裏面有3個子div，都是標準流方式排列。

實驗三：使用絕對定位

下面嘗試使用絕對定位，代碼中找到對#block2的CSS設置位置，目前它仍是空白的，下面將它改成：

#block2 {
    position: absolute;
    top: 30px;
    right: 30px;
}

這是的效果以下圖，以瀏覽器窗口爲基準，從右上角開始向下和向左各移動30像素。

是否是全部的絕對定位都以瀏覽器爲基準來定位呢？答案是否認的，接下來對上面的代碼作一處修改，爲父div增長一個定位樣式，代碼以下：

#father {
    background-color: #a0c8ff;
    border: 1px dashed #000000;
    padding: 15px;
    position: relative;
}

以下圖所示效果發生了變化，偏移的距離沒有變化，可是偏移的基準再也不是瀏覽器窗口，而是它的父div了。

對於絕對定位的描述爲：使用絕對定位的盒子以它的「最近」的一個「已經定位」的「祖先元素」爲基準進行偏移。若是沒有已經定位的祖先元素，那麼會以瀏覽器窗口爲基準進行定位。再有，絕對定位的框從標準流中脫離，這意味着它們對其後的兄弟盒子的定位沒有任何影響，其餘的盒子就好像這個盒子不存在同樣。
回到以前的實驗，最初的代碼中，在父div沒有設置position屬性時，Box-2這個div的全部祖先都不符合「已經定位」的要求，所以它會以瀏覽器窗口爲基準來定位。而當父div將position屬性設置爲relative後，它就符合「已經定位」的要求了，它又是全部祖先中惟一一個已經定位的，也就知足「最近」這個要求，所以就會以它爲基準進行定位了。之後將絕對定位的基準稱爲「包含塊」。

實驗四：絕對定位的特殊性質

對於絕對定位，還有一個特殊性質須要介紹。見以下代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{
    margin:0;
}
#outerBox {
    width: 200px;
    height: 100px;
    margin: 10px auto;
    background: silver;
}
#innerBox {
    position: absolute;
    top: 70px;
    width: 100px;
    height: 50px;
    background: orange;
}
</style>
</head>
<body>
    <div id="outerBox">
        <div id="innerBox"></div>
    </div>
</body>
</html>

代碼中，外面的盒子沒有設置position屬性，內部的盒子設置了絕對定位，可是隻在垂直方向指定了偏移量，沒有指定水平方向的偏移量，此時內部的盒子則由於設置了絕對定位屬性，而外層div沒有position屬性，因此的它的定位基準是瀏覽器窗口。可是又因爲在水平方向上沒有設置偏移屬性，所以在水平方向它仍然會保持原來應該在的位置，它的左側與外層盒子的左側對齊。由於在垂直方向上設置了「top:70px」，因此距離瀏覽器窗口頂部爲70像素。

由此實驗可知，若是設置了絕對定位，而沒有設置偏移屬性，那麼它仍然保持原有的位置。

固定定位：

當position的屬性值爲fixed，即固定定位。它與絕對定位有些相似，區別主要在於定位的基準不是祖先，而是瀏覽器窗口或其它顯示設備窗口。也就是當訪問者拖動瀏覽器的窗口滾動條時，固定定位的元素相對於瀏覽器窗口的位置保持不變。

z-index空間位置：

z-index屬性用於調整定位時重疊塊的上下位置，與它的名稱同樣，想象頁面爲x-y軸，垂直於頁面的方向爲z軸，z-index值大的頁面位於其小的上方。z-index屬性的值爲整數，能夠是正數也能夠是負數。當塊被設置了position屬性時，該值即可以設置各塊之間的重疊高低關係。默認的z-index值爲0，當兩個塊的z-index值同樣時，將保持原有的高低覆蓋關係。

注：該篇博客源自《CSS設計完全研究》中的第四章，書中的例子簡明扼要、通俗易懂，所以特copy下來與你們分享，同時也便於從此本身的在線查閱。