HTML連載58-絕對定位的參考點以及注意事項

時間 2019-12-23

原文原文鏈接

1、絕對定位參考點html

1.規律：git

（1）默認狀況下全部的絕對定位的元素，不管有沒有祖先元素，都會以body做爲參考點。github

<style>

        .box1{

            width: 300px;

            height: 300px;

            background-color: red;

            /*position:absolute;*/

            /*left:0px;*/

            /*bottom:0px;*/

        }

        .box2{

            width: 200px;

            height: 200px;

            background-color: yellow;

            position: absolute;

            left:0px;

            bottom:0px;

        }

</style>

</head>

<body>

<div class="box1">

    <div class="box2"></div>

</div>

（2）若是有一個絕對定位的元素有祖先元素，而且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素爲參考點。微信

 

        .box1{

            width: 300px;

            height: 300px;

            background-color: red;

            position:absolute;

            left:0px;

            bottom:0px;

        }

        .box2{

            width: 200px;

            height: 200px;

            background-color: yellow;

            position: absolute;

            left:0px;

            top:0px;

        }

注意點：i.只要是這個絕對定位元素的祖先元素均可以。ii.指的定位流是指絕對定位/相對定位/固定定位，定位流中只有靜態定位是不行的。學習

（3）若是一個絕對定位的元素有祖先元素，而且祖先元素也是定位流，並且祖先元素中有多個元素都是定位流，那麼這個絕對定位的元素會以離它最近的祖先元素做爲參考點。大數據

 .......上面的代碼不變..........

        .box3{

            width: 100px;

            height: 100px;

            background-color: black;

            position:absolute;

            right:0px;

            bottom:0px;

        }

 .........省略代碼.......

 <div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>

2、絕對定位的注意點ui

（1）若是一個絕對定位的元素是以body做爲參考點，那麼實際上是以網頁首屏的寬度和高度做爲參考點的，而不是以整個網頁的寬度和高度做爲參考點的。spa

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D152_LimeLightOfAbsolutePosition</title>

    <style>

        .box1{

            width: 100px;

            height: 100px;

            background-color: red;

            position:absolute;

            bottom:0px;

            right:0px;



        }

        .box2{

            width: 2000px;

            height: 100px;

            background-color: blue;

            position:

        }

        .box3{

            width: 200px;

            height: 2000px;

            background-color: black;



        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

</html>

（2）一個絕對定位的元素會忽略祖先元素的padding屬性。.net

       .box4{

            height: 300px;

            width: 300px;

            background-color: yellow;

            padding:50px;

            /*position:absolute;*/

            /*boder:20px  black ;*/

        }

        .box5{

            height: 100px;

            width: 100px;

            background-color: red;

            position:absolute;

            left:0px;

            top:0px;     

        }

    </style>

</head>

<body>

<div class="box4">

    <div class="box5"></div>

</div>