css详解4

1、固定定位

固定定位，页面内容多，页面滚动起来，才能看到固定定位效果。

比如下面这个，随之滚动条滚动它一直在右边。比如固定导航栏，小广告，回到顶部，应用在这些地方。一直固定位置不变的。

首先让页面能滚动起来

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>魔降风云变</p>
    <p>魔降风云变</p>
    ...............
    <p>魔降风云变</p>
</body>
</html>

固定位置脱标，写在body的什么位置都行。我在最后一个p后面加个div

  <div class="fix">固定不变</div>

然后给它设置样式

        .fix{
            width: 100px;
            height: 100px;
            background-color: red;
        }

它现在在最下面

把这个盒子放在很多个p标签的中间，不放到最下边了，拖动滚动条它的位置根据页面在滚动。

再给它设置位置固定。盒子在浏览器上找不到了。

        .fix{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
        }

看下面代码：

        .fix{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            top:0;
            left: 0;
        }

给它给位置，拖动滚动条它的位置一直不变。并且压盖了下面的元素。现在它是在设备的左上角。

现象：脱标；固定不变，以页面四个角为参考点

            position: fixed;
            top:0;
            right: 0;

            position: fixed;
            bottom:20px;
            right: -50px;

以浏览器显示页面的四个角为原点，指定位置后滚动滚动条它相对于浏览器页面的这个位置显示不变。它的上左下右和浏览器页面对应边距离对应边属性值个位置，值可以为负，为负时是为正时的反方向移动属性值个位置。

把它放在body的第一个标签，做成导航栏。并且把这个盒子宽度设为100%

        .fix{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top:0px;
        }

发生了压盖现象。

那么内容应该往下挤盒子高度个值。

        body{margin-top:  100px}
        .fix{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top:0px;
        }

 <div class="fix">固定不变</div>
    <p>小马过河</p>
    <p>魔降风云变</p>

红盒子固定不变了。第二个盒子作为内容会被压盖出不来。给body上部设置margin。这样就能显示了。

下面这个可以用这个做了。

这个也可以做左父元素，右子元素，悬浮父元素的时候空格让子元素display显示出来。默认所有子元素都是display:none。

如果三角形也想出来，那么就可以用border画三角形的那个方法弄出来。

可以用左父，右两个子。子绝父相的方法显示出来

这时我body里面又有设置子绝父相的元素了。一个父元素设置了相对定位。

        .active{position: relative;
            background-color: yellow;}


    <p>魔降风云变</p>
    <p class="active">abc魔降风云变</p>
    <p>魔降风云变</p>

后面设置的使用了子绝父相的父元素压盖了红色导航栏，显然是不行的

这时需要用到z-index。它只适用于定位的元素；默认值是auto，一般属性值取数值，正数。如果它的值越大，则层级越高

       .fix{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top:0px;
        }
        .active{position: relative;
            background-color: yellow;}

那么上面都没设置用的是默认。那为什么黄色的层级大压盖了红色呢？如果都设置了定位，谁写在下面了谁层级越高。现在是要让红色层级高，因为不知道后面会用多少定位元素，那么就给红色盒子设置高点的值。

        .fix{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top:0px;
            z-index: 99999;
        }

这样红色盒子就不被z-index值低的压盖了。

z-index:auto 可以默认为它是0，它们是一样的，那么谁在后谁层级高，能显示出来。

猜你喜欢