css position relative absolute fixed

relative相对定位

将定位元素偏离正常文档流，但占用正常文档流的位置。如下图中：

1.relative相对定位是相对于自身的定位，relative元素不加position定位，位置是在虚框位置。

relative元素加了position: relative;将根据top/bottom/left/right,基于虚框的margin左上外角定位的。

2.虚框为relative元素占用的正常文档流的位置，所以正常元素到下面了。

<style>
        * {
            padding: 0;
            margin: 0;
        }

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

        #sub2 {
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>

<body style="border:1px black solid">
    <div id="sub1">relative元素</div>
    <div id="sub2">正常元素</div>
</body>

absolute绝对定位

将定位元素偏离正常文档流，不占用正常文档流的位置。如下图中：

  <style>
        * {
            padding: 0;
            margin: 0;
        }

        #sub1 {
            height: 100px;
            width: 100px;
            position: absolute;
            /* margin: 10px;
            border: 10px;
            padding: 10px; */
            top: 100px;
            left: 100px;
            background-color: red;
        }

        #sub2 {
            height: 100px;
            width: 100px;
            /* position: relative;
            top: 100px;
            left: 100px; */
            background-color: green;
        }

    </style>
<body style="border:1px black solid">
    <div id="sub1">absolute元素</div>
    <div id="sub2">正常元素</div>
</body>

1.absolute元素的父元素没有position定位，absolute元素相对于body定位

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #parent {
            height: 100px;
            width: 100px;
            background-color: yellow;
            /* position: absolute; */
            margin: 100px;
            padding: 100px;
        }

        #child {
            height: 100px;
            width: 100px;
            position: absolute;
            /* margin: 10px;
            border: 10px;
            padding: 10px; */
            top: 100px;
            left: 100px;
            background-color: red;
        }
    </style>
<body style="border:1px black solid">
    <div id="parent">父元素
        <div id="child">absolute元素</div>
    </div>
</body>

2.absolute元素的父元素没有position定位（absolute或relative），absolute元素相对于父元素的padding左上外角进行定位

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        #parent {
            height: 100px;
            width: 100px;
            background-color: yellow;
            position: absolute;
            margin: 100px;
            padding: 100px;
        }

        #child {
            height: 100px;
            width: 100px;
            position: absolute;/*或者positi:relative*/
            /* margin: 10px;
            border: 10px;
            padding: 10px; */
            top: 100px;
            left: 100px;
            background-color: red;
        }
    </style>
<body style="border:1px black solid">
    <div id="parent">父元素
        <div id="child">absolute元素</div>
    </div>
</body>

fixed固定定位

脱离文档流，不占用正常文档流，相对于body定位

css position relative absolute fixed

猜你喜欢