CSS 小結筆記之定位

Assist發表於2018-09-10
CSS筆記

定位也是Css中一個非常強大的屬性。定位主要是用來移動盒子，將其移動到我們想要的位置。

定位分為兩部分

1、邊偏移 left | right |top |bottom：偏移大小；（邊偏移一般制定上就不指定下，指定左就不指定右）

2、定位模式 position :static| relative |absolute | fixed

（1）position :static預設值，使用static時 邊偏移不起效果。常用於取消定位。

（2）position :relative  相對定位，相對於其原文件流的位置進行定位 可以通過邊偏移移動位置，但是原來位置繼續佔有 每次移動以自己的左上角為基點進行移動

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*  */
        
        .son1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .son2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            left: 90px;
            top: 50px;
        }
        
        .son3 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">
        </div>
        <div class="son2">
        </div>
        <div class="son3">
        </div>
    </div>
</body>

</html>
View Code

顯示結果為：   

（3）position :absolute  絕對定位，相對於上一個已經定位的父元素進行定位 脫離標準流，與浮動類似完全不佔位置

　　a、如果父親沒有定位，則以瀏覽器為準對齊，原位置不保留

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*  */
        
        .fa {
            width: 400px;
            height: 400px;
            background-color: aqua;
            margin: 0 auto;
        }
        
        .son1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .son2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 90px;
            top: 50px;
        }
        
        .son3 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">
        </div>
        <div class="son2">
        </div>
        <div class="son3">
        </div>
    </div>
</body>

</html>
View Code

　　b、父親有定位，則以最近的父親元素為基準點對齊 （父親可以是absolute也可以是relative） 一半來說子元素絕對定位，父元素相對定位即“子絕父相”

　　　　在上例中給.fa 樣式增加 一個相對定位 即position: relative; 截個圖變為：

　　　　

　　c、絕對定位 想要水平垂直居中，則先設定left50% 再設定自身寬度的一半 margin-left：-50px　　　

.son2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px;
        }

　　將a中.son的樣式改為如上所示程式碼，可以將.son2 改為水平居中，垂直居中，結果圖如下

　　

（4）position :fixed 固定定位 相對於瀏覽器視窗進行定位,與父元素沒有任何關係 。不佔位置，不隨滾動條滾動， 固定定位一定要寫寬和高（除非有內容撐開盒子） 。

其他注意點：

1、在定位中，會產生層疊關係，設定層疊顯示順序使用z-index：1；數字越大優先順序越高（只對定位元素（靜態定位除外）產生效果）

如下例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 0;
        }
        
        div:first-child {
            background-color: aqua;
            z-index: 3;
        }
        
        div:nth-child(2) {
            background-color: red;
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 2;
        }
        
        div:last-child {
            background-color: pink;
            position: absolute;
            left: 20px;
            top: 20px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>
View Code

在有定位元素中設定z-index 數值高的 顯示在最上面。

2、絕對定位和固定定位會將元素轉換為行內塊元素，因此設定絕對定位和固定定位後就不需要在轉換模式了

相關文章