CSS属性之定位

最新推荐文章于 2024-10-08 19:04:00 发布

楠汐江

最新推荐文章于 2024-10-08 19:04:00 发布

阅读量129

点赞数

分类专栏：前端学习文章标签： html css 定位

本文链接：https://blog.csdn.net/jiayuannan/article/details/105701096

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css属性之定位

定位position

文章由自己的学习历程总结而来，仅供大家参考，欢迎大家交流学习。
定位属性通常用来固定页面导航位置，以及(页面小广告的固定设置）。
接下来我们一起来看一下定位属性吧！

定位position

元素可以使用顶部、底部、左侧和右侧属性定位，定位的方式有绝对定位、相对定位、固定定位以及默认值(即没有定位)
定位元素可以触发5个属性
4个方向：left/right/top/bottom
1个层级关系 z-index
z-index设置内容层级关系，值越大，层级越高

默认定位position：static

语法：{position:static}
HTML元素的默认值，即没有定位，元素出现在文档流中。
static定位不会受到top/bottom/left/right影响、

相对定位position:relative

相对定位是相对自身位置进行定位
position:relative
a.相对定位可以触发5个属性
b.相对定位是在自己的原位置上移动
c.相对定位的元素是占位的，没有脱离文档流
案例demo
设置一个宽高为500px的父元素盒子，其中包含三个背景色不同宽高为100px的小盒子，为第二个盒子设置相对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding:0;}
        .wrap{
            width: 500px;
            height: 500px;
            border: 4px solid #000;
            margin: 100px auto;
        }
        .wrap div{
            width: 100px;
            height: 100px;
            font-size: 40px;
        }
        .box1{
            background: deeppink;
        }
        .box2{
            background: deepskyblue;
            position: relative;
            left: 0px;
            top: 0px;
        }
        .box3{
            background: forestgreen;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
        <div class="box3">div3</div>
    </div>
</body>
</html>

在网页中打开源代码找到第二个小盒子，改变它的left和top的值会发现它本身的位置还占位，并且在自身位置的基础上进行移动。

绝对定位position:absolute

绝对定位是根据父元素(没有父元素，则以浏览器作为父元素进行移动 position:absolute
a.绝对定位的元素脱离文档流
b.绝对定位位置移动，首先先找有定位的父元素作为参照物，如果有就根据父元素肃的范围位置移动，如果没有就以浏览器窗口作为参照物进行位置移动
案例demo
设置一个宽高为500px的父元素盒子，其中包含三个背景色不同宽高为100px的小盒子，为第二个盒子设置绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding:0;}
        .wrap{
            width: 500px;
            height: 500px;
            border: 4px solid #000;
            margin: 100px auto;
            /*父元素作为参照物*/
            position: relative;
        }
        .wrap div{
            width: 100px;
            height: 100px;
            font-size: 40px;
        }
        .box1{
            background: deeppink;
            position: absolute;
        }
        .box2{
            background: deepskyblue;
            position: absolute;
            left: 30px;
            top: 30px;
        }
        .box3{
            background: forestgreen;
            position: absolute;
            left: 60px;
            top: 60px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
        <div class="box3">div3</div>
    </div>
</body>
</html>

1.对第二个盒子设置绝对定位后，如果没有父元素，则第二个盒子不受给定的大盒子的控制，以当前页面为父元素，会根据设置出现在页面的左上角边距各为30px的位置。

2.如果想让第二个小盒子出现在大盒子内，就要以大盒子作为父元素，那么就需要给父元素也设置定位，使其能够作为小盒子的参照物，在作为参照物的时候为了避免父元素脱离文档流，那么将父元素的定位设置为相对定位来作为参照。

固定定位position:fixed

固定定位是在页面进行滑动时，它依然存在于原位置的定位，它有相对定位与绝对定位的性质。
position:fixed
a.固定定位的元素脱离文档流
b.只在窗口显示，不根据父元素移动
案例demo
设置body高为2000px，父元素盒子宽高为500px，其中包含三个背景色不同宽高为100px的小盒子，分别给每个小盒子添加背景色，为第二个小盒子设置固定定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding:0;}
        body{
            height: 2000px;
        }
        .wrap{
            width: 500px;
            height: 500px;
            border: 4px solid #000;
            margin: 100px auto;
        }
        .wrap div{
            width: 100px;
            height: 100px;
            font-size: 40px;
        }
        .box1{
            background: deeppink;
        }
        .box2{
            background: deepskyblue;
            position: fixed;
            left: 0px;
            top: 0px;
        }
        .box3{
            background: forestgreen;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
        <div class="box3">div3</div>
    </div>
</body>
</html>

打开页面可以看到在进行页面滑动时，第二个小盒子的不根据父元素进行移动，同时，在页面中不占位，脱离文档流。

z-index

z-index作为定位元素的第五个属性，它的作用在于设置内容层级关系，值越大，层级越高。
它的值必须为整数，可以为正可以为负，具有更改堆叠顺序的元素会出现在较低的堆叠顺序元素的前面
案例demo:在绝对定位的基础上加了z-index。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding:0;}
        .wrap{
            width: 400px;
            height: 400px;
            border: 4px solid #000;
            margin: 100px auto;
            position: relative;
        }
        .wrap div{
            width: 100px;
            height: 100px;
            font-size: 40px;
        }
        .box1{
            background: deeppink;
            position: absolute;
            z-index: 1;
        }
        .box2{
            background: deepskyblue;
            position: absolute;
            left: 30px;
            top: 30px;
            z-index: 2;
        }
        .box3{
            background: forestgreen;
            position: absolute;
            left: 60px;
            top: 60px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
        <div class="box3">div3</div>
    </div>
</body>
</html>