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>

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;
  • 方案二:
 left: 50%;
 top: 50%;
 margin-left: 负的宽度一半;
 margin-top: 负的高度一半;

注意:该定位的元素必须设置宽高!!!

相关推荐

  1. CSS定位

    2024-03-13 00:50:03       36 阅读
  2. CSS定位

    2024-03-13 00:50:03       28 阅读
  3. css---定位

    2024-03-13 00:50:03       22 阅读
  4. <span style='color:red;'>CSS</span><span style='color:red;'>定位</span>

    CSS定位

    2024-03-13 00:50:03      17 阅读
  5. css Position(定位

    2024-03-13 00:50:03       32 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-13 00:50:03       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-13 00:50:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-13 00:50:03       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-13 00:50:03       20 阅读

热门阅读

  1. 高防IP有哪些防御方法?

    2024-03-13 00:50:03       24 阅读
  2. C++ struct 结构体类型

    2024-03-13 00:50:03       17 阅读
  3. 数据结构-单链表

    2024-03-13 00:50:03       19 阅读
  4. 状态模式在交易策略开发中的应用

    2024-03-13 00:50:03       23 阅读
  5. openssl3.2 - exp - generate prime

    2024-03-13 00:50:03       20 阅读
  6. 深入探讨C#中的递归算法

    2024-03-13 00:50:03       18 阅读
  7. 竹云3.6(日常实习)面经(20min)

    2024-03-13 00:50:03       24 阅读
  8. 计算器系统基础知识-校验码

    2024-03-13 00:50:03       22 阅读
  9. 互联网常见专业词汇汇总

    2024-03-13 00:50:03       23 阅读
  10. C++面试题和笔试题(三)

    2024-03-13 00:50:03       22 阅读
  11. SQL常用函数

    2024-03-13 00:50:03       19 阅读
  12. 【Node.js从基础到高级运用】七、基本的网络编程

    2024-03-13 00:50:03       26 阅读
  13. 全栈开发的必备利器 Next.js

    2024-03-13 00:50:03       24 阅读
  14. Linux应用程序对异步通知的处理

    2024-03-13 00:50:03       22 阅读