CSS中绝对定位和相对定位详解

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

一、普通流

除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

    <style>
        .top-content .test-1{
            color: white;
            height: 200px;
            width: 200px;
            background-color: black;
        }
        
        .top-content .test-2{
            color: white;
            height: 200px;
            width: 200px;
            background-color: blue;
        }
        
    </style>
</head>
<body>
    <div id="topContent" class="top-content">
        <div class="test-1">相对位置测试(1)</div>
        <div class="test-2">相对位置测试(2)</div>
    </div>
    
</body>

普通流.png

二、相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

<style>
        .top-content .test-1{
            color: white;
            height: 200px;
            width: 200px;
            background-color: black;
            position: relative;
            left: 30px;
            top: 20px;
        }
        
        .top-content .test-2{
            color: white;
            height: 200px;
            width: 200px;
            background-color: blue;
            position: relative;
        }
        
    </style>
</head>
<body>
    <div id="topContent" class="top-content">
        <div class="test-1">相对位置测试(1)</div>
        <div class="test-2">相对位置测试(2)</div>
    </div>
    
</body>

相对定位.png

相对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

<style>
        .top-content .test-1{
            color: white;
            height: 200px;
            width: 200px;
            background-color: black;
            position: relative;
            left: 30px;
            top: 20px;
            z-index: 50;
        }
        
        .top-content .test-2{
            color: white;
            height: 200px;
            width: 200px;
            background-color: blue;
            position: relative;
        }
        
    </style>
</head>
<body>
    <div id="topContent" class="top-content">
        <div class="test-1">相对位置测试(1)</div>
        <div class="test-2">相对位置测试(2)</div>
    </div>
    
</body>

修改z轴高度.png

三、绝对定位

绝对定位相对于已定位的最近的父元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
　　绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。
在绝对定位下元素不会占据控件,元素原本的位置会被后面的也u所取代

    <style>
        .top-content .test-1{
            color: white;
            height: 200px;
            width: 200px;
            background-color: black;
            position: absolute;
            left: 30px;
            top: 20px;
            z-index: 50;
        }
        
        .top-content .test-2{
            color: white;
            height: 200px;
            width: 200px;
            background-color: blue;
            position: relative;
        }
        
    </style>
</head>
<body>
    <div id="topContent" class="top-content">
        <div class="test-1">相对位置测试(1)</div>
        <div class="test-2">相对位置测试(2)</div>
    </div>
    
</body>

image.png