CSS的三种定位

深藏阁楼爱情的钟 2022-10-30 12:24 194阅读 0赞

#### 相对定位 ####

该元素的位置是相对于它的原始位置计算而来的。

position:relative;

他是默认参照父级的原始点为原始点，配合top、right、bottom、left进行定位。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>相对定位</title>
    <style type="text/css">
    .king{
    margin-top: 30px;
    margin-left: 30px;
    border: 1px solid silver;
    background-color: skyblue;
    width: 40%;
    }
    .king div{
    width: 100px;
    height: 60px;
    margin: 10px;
    background-color: snow;
    color: black;
    border: 1px solid black;
    }
    .three{
    position: relative;
    top: 20px;
    left: 50px;
    }
    </style>
    <body>
    <div class="king">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
    </div>
    </body>
    </html>

#### 固定定位 ####

被固定的元素不会随着滚动条的拖动而改变位置。

position:fixed;

在默认情况下，固定定位元素的位置是相对浏览器而言，结合top、bottom、left和right这4个属性一起使用。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>固定定位</title>
    <style type="text/css">
    .first{
    width: 50px;
    height: 160px;
    border: 1px solid gray;
    background-color: #b7f1b7;
    }
    .second{
    position: fixed;
    top: 50px;
    left: 160px;
    width: 150px;
    height: 100px;
    border: 1px solid silver;
    background-color:#b7f1b7;
    }
    </style>
    <body>
    <div class="first">div元素</div>
    <div class="second">固定定位的div元素</div>
    </body>
    </html>

#### 绝对定位 ####

position:absolute;

默认情况下，绝对定位的位置是相对于浏览器而言，配合top、right、bottom、left进行定位。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>绝对定位</title>
    <style type="text/css">
    .king{
    padding: 15px;
    border: 1px solid silver;
    background-color: skyblue;
    width: 30%;
    }
    .king div{
    padding: 10px;
    }
    .one{
    background-color: chartreuse;
    }
    .two{
    background-color: cyan;
    position: absolute;
    top: 20px;
    right: 40px;
    }
    .three{
    background-color: darkred;
    }
    .four{
    background-color: dimgrey;
    }
    </style>
    <body>
    <div class="king">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
    </div>
    </body>
    </html>

#### z-index ####

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

*  元素可拥有负的 z-index 属性值。
 *  Z-index 仅能在定位元素上奏效（例如 position:absolute;）

属性值：  
auto：默认，堆叠顺序与父元素相等。  
number：设置元素的堆叠顺序。  
inherit：规定应该从父元素继承 z-index 属性的值。

例：  
设置图像的 z-index：

img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    }