10-CSS定位流

定位流

• 定位流分类
  相对定位
  绝对定位
  固定定位
  静态定位

相对定位

• 什么是相对定位?
  相对定位就是相对于自己以前在标准流中的位置来移动
• 相对定位注意点
  • 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
  • 在相对定位中同一个方向上的定位属性只能使用一个
  • 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
  • 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
• 4.相对定位应用场景
  • 用于对元素进行微调
  • 配合后面学习的绝对定位来使用

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 30px;
            margin-top: 10px
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

---

绝对定位

• 什么是绝对定位?
  绝对定位就是相对于body来定位
• 绝对定位注意点
  • 绝对定位的元素是脱离标准流的
  • 绝对定位的元素是不区分块级元素/行内元素/行内块级元素

<style>
        *{
            margin: 0;
            padding: 0;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            top: 20px;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        /*span{
            width: 50px;
            height: 100px;
            background-color: yellow;
            position: absolute;
        }*/
    </style>
<div class="box1"></div>
<div class="box2"></div>
<span></span>

• 绝对定位参考点

  • 1.规律
    1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

  • 2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
    2.1只要是这个绝对定位元素的祖先元素都可以
    2.2指的定位流是指绝对定位/相对定位/固定定位
    2.3定位流中只有静态定位不行

  • 3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

  • 注意点:
    1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

    2.一个绝对定位的元素会忽略祖先元素的padding

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;
            padding: 20px;
            box-sizing: border-box;

        }

        .son{
            width: 200px;
            height: 200px;
            background-color: green;
            /*position: absolute;*/
            bottom: 0;
            left: 0;
        }

        .son2{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            right: 0;
        }
</style>
<div class="father">
    <div class="son">
        <div class="son2"></div>
    </div>
</div>

---

子绝父相

• 相对定位弊端:
  相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面

• 绝对定位弊端:
  默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

• 子绝父相
  子元素用绝对定位, 父元素用相对定位,这种定位方式在开发中应用较多

---

绝对定位元素水平居中

• 如何让绝对定位的元素水平居中
  • 只需要设置绝对定位元素的left:50%;
  • 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

<style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: yellow;
            position: relative;

        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            top: 250px;
            left: 250px;
            margin-left: -50px;
            margin-top: -50px;

        }
    </style>
<div class="box1">
    <div class="box2"></div>
</div>

---

固定定位

• 什么是固定定位?
  固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
• 注意点:
  1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
  2.固定定位和绝对定位一样不区分行内/块级/行内块级
  3.IE6不支持固定定位

---

z-index属性

• 什么是z-index属性?
  默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
  z-index属性的作用是专门用于控制定位流元素的覆盖关系的

• 1.默认情况下定位流的元素会盖住标准流的元素
  2.默认情况下定位流的元素后面编写的会盖住前面编写的
  3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注意点:
1.从父现象
1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面
1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            /*position: absolute;*/
            /*z-index: -1;*/
            position: relative;
            z-index: 111;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /*position: absolute;*/
            z-index: 667;
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            z-index: 555;
        }

        .box4{
            width: 60px;
            height: 60px;
            background-color: green;
            position: absolute;
            top: 30px
        }
    </style>
<div class="box1">
    <div class="box3"></div>
</div>
<div class="box2">
    <div class="box4"></div>
</div>