position(static-relative-absolute-fixed),margin(top-right-bottom-left),top-right-bottom-left

時間  2019-11-12
標籤 position static relative absolute fixed margin right left 欄目 CSS 简体版
原文   原文鏈接

最近寫css遇到一些問題，因此準備寫下來捋一下思路。javascript

1.position=satic下看margin的使用。（top-right-bottom-left在這種case下無效）css

1-1)marginhtml

a,margin值爲具體的pxjava

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            border: 1px solid blue;
            padding-left: 100px;/*設置父元素的padding爲了明顯子元素的包含塊區域*/
            background: darkgoldenrod;
        }
        .inner{
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 100px;/*相對於包含塊移動,static的包含塊爲父元素的content邊界之內。準確說是相對於元素自身移動
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
</body>
</html>

 結果如圖，web

b,margin值爲百分比測試

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 800px;
            border: 1px solid blue;
            padding-left: 100px;
            background: darkgoldenrod;
        }
        .inner{
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 50%;
        }
        .half{
            width: 500px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<div class="half"></div>
</body>
</html>

 

 

margin仍然是相對於包含塊移動（由於包含塊包裹着子元素，準確來講是相對於子元素自己移動），移動的值是父元素的寬度的百分比（如，50%）,不是父元素這個盒子的寬度。spa

結果以下圖，爲了明顯移動的狀況，我在底部添加了一個寬度50%的div作對比。3d

 

2.position=relative.因爲top和margin-top的百分比狀況下容易致使問題，因此這裏討論時會同時看top和left兩個邊。htm

2-1）marginblog

a,margin值爲具體px

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            border: 1px solid blue;
            padding-left: 100px;
            padding-top: 100px;
            background: darkgoldenrod;
        }
        .inner{
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 100px;//relative元素的包含塊也是父元素的content邊界之內區域
            margin-top: 100px;
        }
        /*.half{*/
        /*width: 50%;*/
        /*height: 100px;*/
        /*background: yellow;*/
        /*}*/
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<!--<div class="half"></div>-->
</body>
</html>

結果如圖，margin依然是相對於包含塊作移動。準確來講是相對於元素自身移動。

b,margin值爲百分比

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 800px;
            height: 400px;
            border: 1px solid blue;
            padding-left: 100px;
            padding-top:100px ;
            background: darkgoldenrod;
        }
        .inner{
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 50%;
            margin-top: 50%;//父元素height=width(400px)+padding-top(100px)=500px.marin-top相對於包含塊使子元素向下移動margin-top(父元素寬度的50%，即400px)
        }
        .half{
            width: 400px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<div class="half"></div>
</body>
</html>

結果如圖，margin依然是以包含塊左上角爲原點移動（準確說是元素自身），不過margin-left/margin-top的值均是父元素寬度的百分比（尤爲須要注意margin-top也是相對於父元素的寬度而不是高度，同理padding）.不過也並非絕對的，當設置了writing-mode爲縱向書寫時，好比-webkit-writing-mode: vertical-lr;此時按百分比書寫的margin就會參照容器的高度來計算了

 

2-2）top-right-bottom-left

a,top和left爲具體值（px）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            /*width: 800px;*/
            height: 400px;
            border: 1px solid blue;
            padding-left: 100px;
            padding-top:100px ;
            background: darkgoldenrod;
        }
        .inner{
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
            top:400px;
            left: 300px;
            opacity: 0.3;

        }
        .half{
            width: 400px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<div class="half"></div>
</body>
</html>

 

 結果如圖，注意這裏爲了顯示明顯，選的值都是比較特殊的。

top/left也是相對於包含塊進行位移。

 

b,top和left爲百分比

1）top/left值爲百分比時，以包含塊爲參考進行移動，移動的值分別相對的是父元素的width和height（width和height指定的是父元素的content區域，即包含塊），而不是父元素這個盒子。

2）top/bottom值爲百分比時，須要保證父元素的height存在（具體的值或者設置了百分比），否則top/bottom就無效。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 800px;
            /*height: 400px;*/  /*若是沒有設置height，子元素的top就無效*/
            border: 1px solid blue;
            padding-left: 100px;
            padding-top:100px ;
            background: darkgoldenrod;
        }
        .inner{
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
            left: 50%;
            top:50%;  /*由於父元素沒設置高度，因此無效*/


        }
        .half{
            width: 500px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<div class="half"></div>
</body>
</html>

 結果以下,因爲父元素沒有現式設置高，則top:50%設置無效。

 

3.position=absolute.

absolute元素的包含塊是最近的已定位祖先元素的padding邊界之內區域。

 

3-1）margin

a.margin-top/margin-left爲具體的值（px）

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            position: relative;
            width: 800px;
            /*height: 400px;*/
            border: 1px solid blue;
            padding-left: 100px;
            padding-top:100px ;
            background: rgba(0,0,255,0.3);
        }
        .inner{
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 100px;
            margin-top: -100px;
        }
        .half{
            width: 500px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<!--<div class="half"></div>-->
</body>
</html>

 

結果如圖，margin相對於元素自身移動

b.margin-top/margin-left爲百分比

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            position: relative;
            width: 800px;
            /*height: 400px;*/
            border: 1px solid blue;
            padding-left: 100px;
            padding-top:100px ;
            background: rgba(0,0,255,0.3);
        }
        .inner{
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 50%;
            /*margin-top: -100px;*/
            opacity: 0.3;
        }
        .half{
            width: 550px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<div class="half"></div>
</body>
</html>

結果如圖，margin-top/margin-left值爲百分比時，相對的是父元素的wdith+padding的百分比（即absolute元素的包含塊---父元素的padding邊界之內區域。上面咱們測試static/relative元素時，相對的是父元素的width的百分比，即relative的包含塊）。

同時margin-top/margin-bottom相對的是width+padding,而不是height+padding。

3-2）top-right-bottom-left

a.top/left爲具體的值（px）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid blue;
            padding-left: 100px;
            padding-top:100px ;
            background: rgba(0,0,255,0.3);
        }
        .inner{
            position: absolute;
            width: 200px;
            height: 250px;
            background: red;
            left:0px;
            top:0px;


        }
        .half{
            width: 450px;
            height: 150px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<!--<div class="half"></div>-->
</body>
</html>

 結果如圖，top/left相對於包含塊移動。

 

b.top/left爲百分比

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid blue;
            padding-left: 100px;
            padding-top:100px ;
            background: rgba(0,0,255,0.3);
        }
        .inner{
            position: absolute;
            width: 200px;
            height: 250px;
            background: red;
            top: 50%;/*移動了250px*/
            /*left: 0;*/
            left: 50%;/*移動了450px*/

        }
        .half{
            width: 450px;
            height: 150px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
    </div>
</div>
<div class="half"></div>
</body>
</html>

 

 結果如圖，相對於包含塊移動。移動的值是相對於父元素的width+padding或height+padding（包含塊）的百分比。

 

4.position=fixed.

4-1）margin

a.margin-top/margin-left爲具體的值（px）

與absolute同樣，不重複了。

b.margin-top/margin-left爲百分比

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            border: 1px solid red;
            width: 50%;
            height: 200px;
        }
        div{
            position: fixed;
            width: 200px;
            height: 100px;
            background: darkviolet;
            margin-left: 50%;
            margin-top:200px;//這裏使用百分比比較複雜，因此用具體的值。
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

 結果如圖，以元素自身爲參考移動。值是相對於窗口大小viewport的百分比。

4-2）top-right-bottom-left

a.top/left爲具體的值（px）

於absolute差很少，不重複了。

b.top/left爲百分比

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            border: 1px solid red;
            width: 50%;
            height: 200px;
        }
        div{
            position: fixed;
            width: 200px;
            height: 100px;
            background: darkviolet;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

 結果如圖，相對於包含塊（窗口）移動，值是相對於窗口大小viewport的百分比。

 

 

 

總結幾條：

1）static/relative的包含塊是父級元素的content區域（width和height決定）。

static/relative元素的 margin-left/margin-top/margin-right/margin-bottom,以元素自身爲參考移動，值爲百分比時，指的是包含塊（width）的百分比，margin-top/margin-bottom相對的也是width而不是height。

static元素的top/left/bottom/right.以包含塊爲參考移動，值爲百分比時，指的是包含塊（width或height）的百分比。

2）absolute元素的包含塊是最近的已定位祖先元素的padding邊框之內區域。

 它的 margin-left/margin-top/margin-right/margin-bottom,以元素自身爲參考移動，值爲百分比時，指的是包 含塊（width+padding）的百分比，margin-top/margin-bottom相對的也是width+padding而不是垂直方向的height+padding.

它的top/left/bottom/right.以包含塊爲參考移動，值爲百分比時，指的是包含塊（width+padding或height+padding）的百分比。

3）fixed的包含塊爲窗口，大小爲viewport.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程