fixed固定定位 定位元素的层级和float层级的区别 遮盖效果

2024年1月18日 348次阅读 来源: Big_fat_cat

71讲 固定定位

固定定位与上一讲的绝对定位很相似，不同点是：

  1. 固定定位永远是浏览器窗口左上角
  2. 不会随着滚轴滚动，常用来做广告

72讲 元素的层级

相对定位没有脱离文档流，但是会灵魂出窍进行元素遮盖。绝对定位脱离了文档流，也能实现遮盖。另外float也会脱离文档流实现某种意义上的遮盖。当这三个遇到一块会出现什么情况？

层级z-index

  1. 只有设置了position才可以使用z-index(position:static除外)进行层级的设置，默认层级是0
  2. 父元素的层级再高也不会盖住子元素
<html>
<head>
<title>层级</title>
<meta charset="utf-8" />
</head>

<style>
    .father{
        width:200px;
        height:200px;
        background:yellow;
        position: relative;
        z-index:999;
    }
    
    .son{
        width:100px;
        height:100px;
        background:purple;
        position: absolute;
        z-index:1;
    }
    
</style>
<body>

<div class="father">
    <div class="son"></div>
</div>

</body>
</html>

关于float层级

div1绝对定位会脱离文档流
position:absolute，那么此时我设置div2为
float:left会出现什么效果呢？发现设置了
position:absolute后也会把
float进行遮盖，并不会出现两个元素水平排列

<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>

<style>

    *{
        margin:0px;
        padding:0px;
    }

    .div1{
        width:200px;
        height:200px;
        background:yellow;
        position: absolute;
        left:50px;
    }
    
    .div2{
        width:300px;
        height:300px;
        background:purple;
        float:left;
    }
    
</style>
<body>

<div class="div1"></div>
<div class="div2"></div>

</body>
</html>

遮盖与总结

如果要实现遮盖效果
position:absolute，应该是首先会想到的

设置了
position属性后会有专属的属性出现:
left top bottom right z-index其他元素不可以使用~~!

    原文作者：Big_fat_cat
    原文地址: https://segmentfault.com/a/1190000018810639
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞