• css---定位

    定位

    1. 相对定位

    1.1 如何设置相对定位？

    • 给元素设置 position:relative 即可实现相对定位。
    • 可以使用 left 、right 、top 、bottom四个属性调整位置。

    1.2 相对定位的参考点在哪里？

    • 相对自己原来的位置

    1.3 相对定位的特点：

    1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
    2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
      默认规则是：
      • 定位的元素会盖在普通元素之上。
      • 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
    3. left不能和 right 一起设置，top 不能和bottom 一起设置。
    4. 相对定位的元素，也能继续浮动，但不推荐这样做。
    5. 相对行为的元素，也能通过margin 调整位置，但不推荐这样做。

    注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

    2. 绝对定位

    2.1 如何设置绝对定位？

    • 给元素设置 position: absolute 即可实现绝对定位。
    • 可以使用 left 、right 、top 、bottom 四个属性调整位置。

    2.2 绝对定位的参考点在哪里？

    • 参考它的包含块。

    什么是包含块？

    1. 对于没有脱离文档流的元素：包含块就是父元素；
    2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

    2.3 绝对定位元素的特点：

    1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
    2. left不能和 right 一起设置，top 不能和bottom 一起设置。
    3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
    4. 绝对定位的元素，也能通过margin 调整位置，但不推荐这样做。
    5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

    何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。

    3. 固定定位

    3.1 如何设置为固定定位？

    • 给元素设置 position: fixed 即可实现固定定位。
    • 可以使用 left 、right 、top 、bottom 四个属性调整位置。

    3.2 固定定位的参考点在哪里？

    • 参考它的视口

    什么是视口？—— 对于PC浏览器来说，视口就是我们看网页的那扇“窗户”。

    3.3 固定定位元素的特点

    1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
    2. left 不能和 right 一起设置，top 不能和bottom 一起设置。
    3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
    4. 固定定位的元素，也能通过margin 调整位置，但不推荐这样做。
    5. 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素

    4. 粘性定位

    4.1 如何设置为粘性定位？

    • 给元素设置 position:sticky 即可实现粘性定位。
    • 可以使用 left 、right 、top 、bottom 四个属性调整位置，不过最常用的是top 值。

    4.2 粘性定位的参考点在哪里？

    • 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先（父元素高度大于子元素高度，但父元素设置了overflow:scroll）。

    4.3 粘性定位元素的特点

    • 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
    • 最常用的值是top 值。
    • 粘性定位和浮动可以同时设置，但不推荐这样做。
    • 粘性定位的元素，也能通过margin 调整位置，但不推荐这样做。

    粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

    案例代码如下：

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>粘性定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 2000px;
        }
        .page-header {
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: orange;
            font-size: 20px;
        }
        /* .content { */
            /* height: 200px; */
            /* overflow: auto; */
            /* overflow: scroll; */
        /* } */
        .item {
            background-color: gray;
        }
        .first {
            background-color: skyblue;
            font-size: 40px;
            position: sticky;
            top: 0px;
            /* float: right; */
            /* margin-right: 100px; */
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="page-header">头部</div>
    <!-- 内容区 -->
    <div class="content">
        <!-- 每一项 -->
        <div class="item">
            <div class="first">A</div>
            <h2>A1</h2>
            <h2>A2</h2>
            <h2>A3</h2>
            <h2>A4</h2>
            <h2>A5</h2>
            <h2>A6</h2>
            <h2>A7</h2>
            <h2>A8</h2>
        </div>
        <div class="item">
            <div class="first">B</div>
            <h2>B1</h2>
            <h2>B2</h2>
            <h2>B3</h2>
            <h2>B4</h2>
            <h2>B5</h2>
            <h2>B6</h2>
            <h2>B7</h2>
            <h2>B8</h2>
        </div>
        <div class="item">
            <div class="first">C</div>
            <h2>C1</h2>
            <h2>C2</h2>
            <h2>C3</h2>
            <h2>C4</h2>
            <h2>C5</h2>
            <h2>C6</h2>
            <h2>C7</h2>
            <h2>C8</h2>
        </div>
    </div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    5. 定位层级

    1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
    2. 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
    3. 可以通过 css 属性 z-index 调整元素的显示层级。
    4. z-index 的属性值是数字，没有单位，值越大显示层级越高。
    5. 只有定位的元素设置 z-index 才有效。
    6. 如果z-index 值大的元素，依然没有覆盖掉z-index 值小的元素，那么请检查其包含块的层级。

    6. 定位的特殊应用

    注意：

    1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
    2. 发生相对定位后，元素依然是之前的显示模式。
    3. 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。

    6.1 让定位元素的宽充满包含块

    • 块宽想与包含块一致，可以给定位元素同时设置 left 和 right为 0。
    • 高度想与包含块一致，top 和 bottom 设置为 0。

    6.2 让定位元素在包含块中居中

    • 方案一：
     left:0;
 right:0;
 top:0;
 bottom:0;
 margin:auto;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 方案二：
     left: 50%;
 top: 50%;
 margin-left: 负的宽度一半;
 margin-top: 负的高度一半;

    • 1
    • 2
    • 3
    • 4

    注意：该定位的元素必须设置宽高！！！

  • 相关阅读:
    软件测试面试题：请你回答一下性能测试有哪些指标，对一个登录功能做性能测试，有哪些指标，怎么测出可同时处理的最大请求数量?
    面试总结之JVM入门
    二刷力扣--二叉树(2)
    redis 进阶
    前端跨界面之间的通信解决方案
    纳米体育数据足球数据接口：资料库数据包接口文档API示例②
    C++ 模板同时使用默认参数和偏特化
    升级pip
    :active vs :focus
    (codeforce547)C-Mike and Foam(质因子+容斥原理)
  • 原文地址：https://blog.csdn.net/mwm2378/article/details/136665034