定位、图片Z-index覆盖详解

最新推荐文章于 2024-03-27 20:50:20 发布

黄小熊Sharon

最新推荐文章于 2024-03-27 20:50:20 发布

阅读量2.8k

点赞数 2

分类专栏： CSS 文章标签：定位-Z-index

本文链接：https://blog.csdn.net/baidu_36830673/article/details/75653801

版权

本文详细介绍了CSS中的定位技术，包括绝对定位、固定定位的原理和使用方式，以及z-index属性在层叠覆盖中的作用。通过实例展示了如何利用'子绝父相'进行效果调整，并探讨了z-index数值大小决定覆盖顺序的规则。

摘要由CSDN通过智能技术生成

CSS最重要的三个技术:浮动、盒模型、定位，这里主要介绍一下定位方面的知识：
我们都知道定位通常可以分为三种:固定定位、绝对定位、相对定位。


 **相对定位:**
    position:relative;
    left:
    right:
    top:
    bottom:
    正值的话分别表示向右、向左、向下、向上移动;
    负值的话分别表示向左、向右、向上、向下移动;
    相对定位表示元素相对自己当前的位置移动，一般左右任选一个，上下任选一个，进行定位。

****参见代码:****

div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: #f00;
    }
    .box2{
        background-color: #0f0;
    }
    <div class=