position定位布局

最新推荐文章于 2024-03-29 03:23:26 发布

卡夫卡的小熊猫

最新推荐文章于 2024-03-29 03:23:26 发布

阅读量231

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43641110/article/details/119538911

版权

1.什么是定位？

css中的position属性，position有四个值：

static 静态(默认)

absolute 绝对

relative 相对

fixed 固定

sticky 粘滞

通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。

2.static：

是所有元素的默认定位方式，没有特别的设定，遵循基本的定位规定，意味着将一个元素定位在默认文档流中。不能通过z-index进行层次分级，在普通流中，各个元素默认的属性。可以在把position的值从其他值修改成默认的情况下使用。

<!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>relative</title>
    <style>
        .box{
            width: 100%;
            height: 200px;
            position: relative;
            background-color: blue;
            text-align: center;
            font-size: 28px;
            color: brown;
            line-height: 60px;
            top: 30px;
        }
        .box1{
            background-color: darkorange;
            position: static;
            top: 30px;
            
        }
    </style>
</head>
<body>
    <div class="box">top</div>
    <div class="box1">hello</div>
</body>
</html>

已经设置了position: static;设置其他属性，在页面上是不显示，控制台中top: 30px;是不予执行的

3. relative

        与静态定位相似
        不脱离文档流，原先位置保留,可以覆盖在其他元素上
        如果不设置top, bottom, left, right属性，依然在原位置
        对于相对定位的元素我们可以通过属性top, bottom, left, right来改变元素最终的位置。元素移动的时候是相对于【当前元素所在的位置】进行移动。
        默认宽度100%

<!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>relative</title>
    <style>
        .box{
            width: 100%;
            height: 200px;
            position: relative;
            background-color: blue;
            text-align: center;
            font-size: 28px;
            color: brown;
            line-height: 60px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div class="box">top</div>
</body>
</html>

代码中设置了定位元素 position: relative;和top: 30px;所以建立的盒子模型与浏览器默认视口的顶部相距30px。

box1存在，由于box占据了原先的位置，且被box覆盖，所以显示不出来。

z-index:

当两个定位元素叠加在一起的时候，可以使用“z-index”来改变两个定位元素出现的顺序（ z-index 取值无需指定单位，值大的显示在上方。）

<!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>relative</title>
    <style>
        .box{
            width: 100%;
            height: 200px;
            position: relative;
            background-color: blue;
            text-align: center;
            font-size: 28px;
            color: brown;
            line-height: 60px;
            top: 30px;
        }
        .box1{
            background-color: darkorange;
            position: relative;
            z-index: 1;
            color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box">top</div>
    <div class="box1">hello</div>
</body>
</html>

4.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>Document</title>
    <style>
        .box{
            position: absolute;
            background-color: fuchsia;
            font-size: 28px;
            color: honeydew;
            line-height: 60px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div class="box">absolute</div>
</body>
</html>

没有父元素，所以相对于左上角的视口，背景的长宽是靠内容的大小支撑起来的

父元素不是定位元素，也不会对其进行相对定位（一般来说，absolute 会和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>Document</title>
    <style>
        .box{
            position: absolute;
            background-color: fuchsia;
            font-size: 28px;
            color: honeydew;
            line-height: 60px;
            top: 30px;
        }
        .main{
            position: relative;
            top:100px
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box">absolute</div>
    </div>
    
</body>
</html>

不占据原来的位置，所以新的div使用box1的位置

<!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>Document</title>
    <style>
        .box{
            position: absolute;
            background-color: fuchsia;
            font-size: 28px;
            color: honeydew;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="box">absolute</div>   
    <div>htmlhtmlhtmlhtmlhtmlhtmlhtml</div>
</body>
</html>

5. 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>定位布局</title>
    <style>
        .box1{
            width: 100%;
            height: 200px;
            position: fixed;
            background-color: blue;
            text-align: center;
            font-size: 28px;
            color: brown;
            line-height: 60px;
        }
        
    </style>
</head>
<body>
  
        <div class="box1">top</div>
        <div style="height: 2000px;position: relative;top: 60px; ">
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
        </div>

   
</body>
</html>

滚轴转动，包含hello的div文本滚动，但top不动

6.sticky

        结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
        元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
        设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
        当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动（此时相当于fixed定位）。
        元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport(视口区)来计算元素的偏移量。

<!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>Document</title>
    <style>
        .top{
            height: 60px;
            background-color: brown;
            font-size: 28px;
            color: cornflowerblue;
            text-align: center;
            line-height: 60px;

        }
        .nav{
            width: 100%;
            height: 60px;
            background-color: cornsilk;
            color: cyan;
            font-size: 28px;
            text-align: center;
            line-height: 68px;
            position: sticky;
            top: 0;


        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="nav">nav</div>
    <div style="height: 2000px;position: relative;"></div>
</body>
</html>