2020-11-11

css定位属性

1.相对定位： relative

2.绝对定位 ：absolute

3.固定定位 ：fixed

相对定位

 div {
            width: 200px;
            height: 200px;
            background-color: #ff6900;
        }
        
        .a1 {
            background-color: #663600;
            position: relative;
            left: 100px;
            top: 50px;
            z-index: 2;
        }

相对与自己原

来的位置定位，进行位置的调整。

margin与相对定位调整位置的区别：

  1.盒子和盒子的距离，间隙。相对定位：位置的调整

  2.margin会影响后面的元素。相对定位不会影响别人。

 

  不脱标。标准流。

绝对定位

.father {
            margin-left: 300px;
            padding-left: 300px;
            width: 1200px;
            height: 300px;
            background-color: red;
            position: relative;
            /* bottom: 100px; */
            /* left: 100px; */
        }
        
        .son {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 300px;
            /* left: 50%;
      margin-left: -150px; */
            background-color: teal;
            /* margin: 0 auto; */
        }

 做绝对定位的参考，子绝父相。找一个参考系，定义横纵坐标。默认是在父容器或者浏览器的左上角或左下角。横坐标用left，right 纵坐标用top和botto

绝对定位会脱标。不是标准流

 以盒子为参考点：

浏览器窗口高600px，页面已经卷了200px，现在有一个div：

    wid：100

    hei：100px

    bc red;

    post ab;

    left:200px;

    bottom:200px

      一个绝对定位的元素，如果祖先元素中出现了已定位的元素，那么将以该元素为参考点。

      1.以最近的已经定位的祖先元素，不一定是父容器，也可以是爷爷。

      2.不一定是相对对位，任何定位信息，都可以做子容器的参考点。

      3.使用最多的子绝父相。

      4.以父容器的border内侧点为参考点，进行定位。

应用：

      1.压盖效果，一个div压在另一个div上面。

      2.绝对定位的盒子居中。  left:50%;margin-left: -自身宽度的一半;。

固定定位

相对浏览器进行定位，无论页面怎么滚动， 这个盒子显示的位置不变。

.nav {
            width: 1000px;
            height: 50px;
            position: fixed;
            top: 0;
            left: 0;
            background-color: tomato;
        }

  用途：

  1.网页返回顶部，侧边广告。

  2.顶部固定导航条

 z-index

div{
      width: 200px;
      height: 200px;

    }
    .div1{
      background-color: thistle;
      position: relative;
      z-index: 2;
      top:100px;
      
    }
    .div2{
      background-color: turquoise;
      position: relative;
      /* z-index: 1; */
      /* top: -100px; */
    }
    .son1{
      background-color: violet;
      position: absolute;
      left: 500px;
      top:200px;
      /* z-index: 1; */
    }
    .son2{
      background-color: yellowgreen;
      position: absolute;
      left: 500px;
      top:200px;
      z-index: 3;
    }

 z-index 属性 是定位元素专用的。 属性值是数字，数值大的会压盖住数值小的 

  1. z-index都没有值或值相同的时候，写在后面的盒子会盖住前面的盒子。

  2.数值大的会盖住数值小的，z-index是一个自然数，默认为0.

   3.从父现象：大家都有z-index的值的时候，会比较父容器的z-index，如果父1比父2大，就算儿子2比儿子1大，儿子1也能压住儿子2。

demo（浏览页圆点）

html

<ul>
        <li>
            <a href="#"></a>
        </li>
        <li>
            <a href="#"></a>
        </li>
        <li>
            <a href="#"></a>
        </li>
        <li>
            <a href="#"></a>
        </li>
        <li>
            <a href="#"></a>
        </li>
        <li>
            <a href="#"></a>
        </li>
    </ul>

css

ul {
            list-style-type: none;
        }
        
        li {
            float: left;
            margin: 0 5px;
        }
        
        a {
            display: inline-block;
            width: 6px;
            height: 6px;
            border: 1px solid RED;
            border-radius: 50%;
        }