布局——定位布局-CSDN博客

本文链接：https://blog.csdn.net/QYXQYX_/article/details/119873699

position：
static	【默认值】	非定位元素	相对的是元素原先的位置，不脱离文档流(还占据原先的位置)，宽度默认为100%，可以覆盖在其他元素
relative	相对定位	定位元素	相对的是元素原先的位置，不脱离文档流(还占据原先的位置)，宽度默认为100%，可以覆盖在其他元素
absolute	绝对定位	定位元素	相对的是距离它最近的父定位元素的位置(没有父元素时，则相对于浏览器视口)，如果没有父定位元素，那么它相对于浏览器视口。脱离文档流（不占据原先位置）
fixed	固定定位	定位元素	相对于浏览器的视口，他也脱离文档流，不会随着浏览器的滚动而滚动
sticky	粘滞定位	定位元素	不脱离文档流使用设置一个过度点，当超过这个过度点的时候就会体现fixed固定在页面上

注：

1.脱离文档流的特点：默认宽度由内容决定，不占据原先的位置，原先的位置被其他元素被其它元素抢占
2.只有定位元素才可以使用：top、right、bottom、left、z-index

relative的应用

<!--relative的应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局1</title>
    <style>
       .box1{
           position: relative;
           background-color: blueviolet;
           top:50px;
           height: 100px;
       }
       .box2{
           background-color: cyan;
           height: 30px;
       }/*不脱离文档流、且被覆盖*/
       .box3{
        background-color: deeppink;
        position: relative;
        z-index: 1px;
       }
    </style>
</head>
<body>
    <div class="box1">123</div>
    <div class="box2">hello</div>
    <div class="box3">567</div>
</body>
</html>

absolute的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局2</title>
    <style>
        /*没有父元素，相对于浏览器视口*/
        .box2{
            height: 100px;
            position: absolute;
            background-color: blueviolet;
            /*top:30px; */ 
        }
        .text2{
            height: 200px;
            background-color: deeppink;
        }
        /*拥有父元素，且父元素为定位元素*/
         .main{
            position: relative;
            top: 100px;
        }/*相对父元素*/
        .box1{
            background-color: deepskyblue;
            height: 20px;
            width: 20px;
            position: absolute;
        }
    </style>
</head>
<body>
    
    <div class="box2">123</div>
    <div class="text2">这是一句话</div><!--脱离文档流-->
    <div class="main">
        <div class="box1">123</div>
        <div>hello hello hello hello hello</div>
    </div>
</body>
</html>

fixed的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位元素3</title>
    <style>
        .box1{
            width: 100%;
            height: 60px;
            position: fixed;
            background-color: #333;
            text-align: center;
            color: #fff;
            font-size: 28px;
            line-height: 60px;
            z-index: 20px;
        }
        .photo{
            position: relative;
            z-index: -1;
        }
    </style>
<body>
    <div class="box1">top</div>
    <div style="height:2000px;position: relative;top:60px;">
    <div class="photo"><img src='./one.jpg' alt=""></div>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    </div>
</body>
</html>

粘滞定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘滞定位</title>
    <style>
        .top{
            height: 60px;
            background-color: deeppink;
            font-size: 28px;
            color: floralwhite;
            text-align: center;
            line-height: 60px;
        }
        .nav{
            width: 100%;
            height: 68px;
            background-color: lightblue;
            color: mediumpurple;
            font-size: 20px;
            text-align: center;
            position: sticky;
            top:50px;
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="nav">nav</div>
    <div style="height:1000px;"></div>
</body>
</html>