HTML&CSS(06)---CSS(5)定位

 
  • 0 views

Unit Two: HTML&CSS(06)—CSS(5)定位

1. 定位(Position)

  • 通过定位可以将元素放到页面的任意位置。

  • position可选值

    • static默认值，未开启定位。
    • relative相对定位
    • absolute绝对定位
    • fixed固定定位
    • sticky粘滞定位

  • 相对定位relative（灵魂出窍！）

    • 特点：
      • 元素开启相对定位以后，如果不设置元素偏移量不会发生任何变化。
        • 偏移量
          • top定位元素和定位位置上边的垂直距离。
          • right定位元素和定位位置右边的水平距离。
          • bottom定位元素和定位位置下边的垂直距离。
          • left定位元素和定位位置左边的垂直距离。
    • 定位原点
      • 元素相对自己在文档流中的原位置为原点。
    • 相对定位会提升元素的层次。
    • 相对定位不会使元素脱离文档流。
    • 相对定位不会改变元素的性质。块还是块，行内还是行内。

  • 绝对定位absolute

    • 特点
      • 开启绝对定位后，如果不设置偏移量，元素位置不会发生变化。
      • 开启绝对定位后，元素会从文档流中脱离。
      • 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开。
      • 绝对定位会提升元素的层级。
      • 绝对定位元素是相对于其包含块进行定位。
        • 包含块
          • 当前元素最近的祖先元素。
          • 开启绝对定位元素，包含块是离它最近的开启了定位的祖先元素。
            • 如果祖先元素都没开启定位，则相对于根元素进行定位。

  • 固定定位fixed

    • 特点
      • 固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位相同。
      • 唯一不同：固定定位永远参考浏览器视口进行定位。
        • 固定定位的元素不会随网页的滚动条滚动。

  • 粘滞定位sticky

    当元素的<position:sticky>则开启元素的粘滞定位。粘滞定位和相对定位的特点基本一致。

    • 不同的是粘滞定位可以在元素到达某个位置时将其固定。
    • 粘滞定位相对于其包含块进行定位。

2. 绝对定位元素位置

  • 绝对定位一般配合相对定位一起运用!

  • 绝对定位元素位置

    • 水平布局

      • 包含块内容区宽度= left + margin-left/right+ border-left/right+ padding-left/right+width+right

      • 水平方向布局等式需要添加<left>和<right>两个值。

        • 此时规则和之前一样，只是多添加了两个值。

        • 当发生过度约束时：

          • 如果9个值中没有:auto，则自动调整<right>值以使等式满足。

          • 如果 <margin><width><left><right>中有：auto，则自动调整该值。

                    .box2{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            position: absolute;
            left: 0px;
            right: 0px;
            margin-left: auto;
            margin-right: auto;
            /*水平居中*/
        }

          • <right><left>值默认是<:auto>，所以不设置值，则会自动填充这两个值。

    • 垂直布局

      • 包含块内容区高度= top + margin-top/bottom+ border-top/bottom+ padding-top/bottom+height+bottom

                .box2{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            position: absolute;
            top: 0px;
            bottom: 0px;
            margin-top: auto;
            margin-bottom: auto;
        }

3. 元素层级(<z-index>)

对于开启了定位元素，可以通过<z-index>属性来指定元素的层级。

  • <z-index:1>需要一个整数作为参数，值越大元素层级越高，越优先显示。

  • 祖先元素层级再高，也不会盖住后代元素。

  • 轮播图练习

    <!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Unit 2 CSS/203 盒子模型/08 exercise/reset style/reset.css">
    <style>
        .list {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            margin-top: 30px;
            /*开启ul相对定位，使ul下的绝对定位元素相对于父元素定位。*/
            position: relative;
        }
  
        li {
            position: absolute;
        }
  
        img {
            width: 500px;
            height: 300px;
        }
  
        /* .list li:nth-child(3){
           z-index: 1;
           } */
  
        .pointer a {
            /* 设置元素向左排列，行内元素变成块元素 */
            float: left;
            width: 10px;
            height: 10px;
            margin-left: 5px;
            background-color: rgba(255, 255, 255, .6);
            border-radius: 10px;
        }
  
        .pointer a:hover {
            background-color: black;
        }
  
        .pointer {
            position: absolute;
            z-index: 999;
            bottom: 20px;
            left: 40px;
        }
    </style>
</head>
  
<body>
    <ul class="list">
        <li><a href="https://www.bilibili.com/video/BV1XJ411X7Ud?p=75" class="item"><img
                    src="/Unit 2 CSS/203 盒子模型/08 exercise/jd/1.jpg" alt="1.jpg" class="1"></a></li>
        <li><a href="https://www.bilibili.com/video/BV1XJ411X7Ud?p=75" class="item"><img
                    src="/Unit 2 CSS/203 盒子模型/08 exercise/jd/2.jpg.webp" alt="2.jpg" class="2"></a></li>
        <li><a href="https://www.bilibili.com/video/BV1XJ411X7Ud?p=75" class="item"><img
                    src="/Unit 2 CSS/203 盒子模型/08 exercise/jd/3.jpg.webp" alt="3.jpg" class="3"></a></li>
        <li><a href="https://www.bilibili.com/video/BV1XJ411X7Ud?p=75" class="item"><img
                    src="/Unit 2 CSS/203 盒子模型/08 exercise/jd/4.webp" alt="4.jpg" class="4"></a></li>
        <li><a href="https://www.bilibili.com/video/BV1XJ411X7Ud?p=75" class="item"><img
                    src="/Unit 2 CSS/203 盒子模型/08 exercise/jd/5.jpg" alt="5.jpg" class="5"></a></li>
        <div class="pointer">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>
</body>
  
</html>