CSS中的定位

倚栏ζ听冷雨

于 2022-10-16 19:23:02 发布

阅读量789

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_49336701/article/details/127351304

版权

什么是CSS

CSS 是“Cascading Style Sheet”的缩写，中⽂意思为“层叠样式表”，它是⼀种标准的样式表语⾔，⽤于描述⽹⻚的表现形式（例如⽹⻚元素的位置、⼤⼩、颜⾊等）。

定位

在CSS中关于定位的内容是：position: relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。

定位的分类

static：

对象遵循常规流（默认）。此时4个定位偏移属性不会被应用。

relative：

对象遵循常规流（相对定位），并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。（相对于原来的位置，不脱离标准文档流）

absolute：

对象脱离常规流（绝对定位），此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（相对于原来的位置，脱离标准文档流）

fixed：

与absolute一致，但偏移定位是以窗口为参考（固定定位）。当出现滚动条时，对象不会随着滚动。

sticky：

对象在常态时遵循常规流（粘性定位）。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

补充说明

用于指定一个元素在文档中的定位方式

当 position 的值为 非static 时，其层叠级别通过 z-index 属性定义。
绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。
对应的脚本特性为position。

举例

1.relative （相对定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            /*  相对定位  relative */
            /* 相对于原来的位置
              不脱离标准文档流
             */
            position: relative;
            top: 100px;
            left: 100px;
            /*right: 100px;*/
            /*bottom: 100px;*/
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>

</body>
</html>

2.absolute（绝对定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            margin-top: 50px;
            margin-left: 50px;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        .son {
            /* 绝对定位  absolute */
            /* 脱离标准文档流
               不保留原本的位置
             */
            position: absolute;
            top: 50px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>

</body>
</html>

3.fixed（固定定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed{
            position: fixed;
            left: 50%;
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;

        }
    </style>
</head>
<body>
<div class="fixed"></div>
<div class="w">
    盒子盒子盒子盒子盒子
</div>
</body>
</html>

4.sticky（粘性定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 3000px;
            background-color: aqua;
        }
        .nav{
            /* 粘性定位 */
            position: sticky;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>

</head>
<body>
<div class="nav">我是导航栏</div>
</body>
</html>

拖动滚动条，该div块会随滚动条的滚动而滚动

定位的堆叠顺序 z-index

z-index 定义和用法

属性设置元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注：

元素可拥有负的 z-index 属性值。

仅能在定位元素上奏效（例如 position:absolute;）

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: absolute;
            top: 0;
            left: 0;

        }
        .divA{
            width: 200px;
            height: 300px;
            background-color: red;
            z-index: 1;
        }
        .divB{
            width: 200px;
            height: 80px;
            top: 100px;
            z-index: 2;
            background-color: skyblue;
        }
        .divC{
            width: 200px;
            height: 30px;
            top: 130px;
            z-index: 3;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="divA">
</div>
<div class="divB">
</div>
<div class="divC">
</div>
</body>
</html>