（18）css常用样式—定位属性

最新推荐文章于 2023-12-25 17:08:57 发布

泽哥ins

最新推荐文章于 2023-12-25 17:08:57 发布

阅读量856

点赞数

分类专栏： CSS3 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_36213140/article/details/121778793

版权

CSS3 专栏收录该内容

53 篇文章 5 订阅

订阅专栏

本文深入探讨了CSS布局中的定位属性，包括relative、absolute和fixed。相对定位允许元素在原始位置基础上偏移，不脱离标准流；绝对定位则脱离标准流，依据最近的定位祖先元素或body进行偏移；固定定位元素始终相对于浏览器窗口定位。此外，还详细阐述了偏移量属性、居中技巧、压盖效果及z-index层叠规则，提供了丰富的实例来说明各种定位的应用场景。

摘要由CSDN通过智能技术生成

一、定位属性position

前面我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。

属性名：position

属性值：relative 相对定位 absolute 绝对定位 fixed 固定定位

作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。

二、偏移量属性

定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。

水平方向：left、right。

垂直方向：top、bottom。

属性值：常用 px 为单位的数值，或者百分比。

三、相对定位

属性值：relative，相对的意思。参考元素：标签加载的原始位置。必须搭配偏移量属性才能发生位置移动。

1.相对定位的性质

相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。元素显示效果上，记忆口诀：原位留坑，形影分离。

2.相对定位的注意事项

注意①：偏移量属性的值是区分正负的。正数：表示偏移方向与属性名方向相反。负数：表示偏移方向与属性名方向相同。例如：left:-100px，它是向左进行偏移，所以和单词left左的意思一样。

注意②：同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。建议：书写时从水平方向和垂直方向各挑一个属性进行组合。

注意③：由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。为了方便记忆，可以选择只使用 left、top 组合。

四、定位的实际应用案例

1. 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。

2. 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

示例：

<!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>
        body,ul,li,a{
            margin: 0;
            padding: 0;
        }
        .nav {
            list-style: none;
            width: 900px;
            height: 50px;
            margin: 50px auto;
            font: 20px/50px "微软雅黑";
            background-color: #f00;
        }
        .nav li {
            float: left;
            width: 150px;
            height: 50px;
        }
        .nav li a {
            display: block;
            width: 150px;
            height: 50px;
            background-color: skyblue;
            text-decoration: none;
            text-align: center;
        }
        .nav li a:hover {
            position: relative;
            left: 0;
            top: -3px;
            border-top: 3px solid #f00;
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
</body>
</html>

五、绝对定位

属性值：absolute，绝对的意思。参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考 <body>。必须搭配偏移量属性才会发生位置移动。

示例1：当我们没有设置偏移属性，它就会自己让出自己的位置，脱离文档流

示例2：当我们设置了偏移属性，没有设置相对定位，它是相对于Body进行偏移的。

示例3：当我们设置了偏移属性，也设置相对定位了，它是相对于设置了相对定位的父元素进行偏移的。

绝对定位的性质

性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。注意2：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。

<body> 为参考元素的参考点

以 <body> 为参考元素时，参考点的确定与偏移量方向有关。第一，如果有 top 参与的定位，参考点就是 <body> 页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。第二，如果有 bottom 参与的绝对定位，参考点是 <body> 页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。实际应用中，如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用 <body> 作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考 <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>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .box1 {
            position: relative;
            width: 600px;
            height: 600px;
            padding: 10px;
            border: 10px solid #f00;
        }
        .box2 {
            position: absolute;
            width: 400px;
            height: 400px;
            padding: 10px;
            border: 10px solid #0f0;
        }
        .box3 {
            position: fixed;
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 10px solid #00f;
        }
        p {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                <p></p>
            </div>
        </div>
    </div>
</body>
</html>

根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况，也可以说成是父相子绝。

祖先元素参考点

如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。 left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。 right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。 left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角。

六、固定定位

属性值：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>css定位—固定定位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin-top: 20px;
        }
        a {
            position: fixed;
            right: 100px;
            bottom: 100px;
            width: 100px;
            height: 50px;
            background-color: #0f0;
            font: 20px/50px "微软雅黑";
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">回到顶部</a>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

固定定位的性质

固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。

七、定位应用

定位 position根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流。三种定位在页面中有各自的使用场景

1.压盖效果

所有的定位类型都可以实现压盖效果。由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。

2.居中效果

定位的元素，如果想在参考元素中居中显示，有自己的居中方法：

第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度。

<!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>css-压盖效果</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 10px solid #000;
        }
        p {
            position: absolute;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/hat.png" alt="">
        <p></p>
    </div>
</body>
</html>

第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。

注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。

扩展应用

①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。

②浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

八、压盖顺序

实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。

1.默认压盖顺序

定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位。因此，书写代码时，需要注意压盖效果，必须合理设置 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>css层叠z-index</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .box2 {
            position: relative;
            top: -200px;
            width: 150px;
            height: 150px;
            background-color: #f00;
        }
        .box3 {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: #0f0;
        }
        .box4 {
            position: fixed;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</body>
</html>

2.自定义压盖顺序z-index 属性

如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性。属性值：数字。

3.自定义压盖顺序注意事项

①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。例如给其中一个盒子设置z-index的属性值为1，那么其他的盒子没有设置z-index属性，他会将加了z-index属性的盒子显示再最外层。

②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。这里参考的是HTML标签元素的熟书写顺序，而不是css的书写顺序。

③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。

④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。子级盒子：如果父级没有设置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>css层叠z-index</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .box2 {
            position: relative;
            top: -200px;
            width: 150px;
            height: 150px;
            background-color: #f00;
        }
        .box3 {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            z-index: 2;
            background-color: #0f0;
        }
        .box33 {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box4 {
            position: fixed;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            z-index: 1;
            background-color: #00f;
        }
        .box5 {
            position: fixed;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3
        <div class="box33">box33</div>
    </div>
    <div class="box4">box4
        <div class="box5">box5</div>
    </div>
</body>
</html>

泽哥ins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（18）css常用样式—定位属性

一、定位属性position前面我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。属性名：position属性值：relative 相对定位absolute 绝对定位 fixed固定定位作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。...
复制链接

扫一扫