liun_n 2021-09-15 14:54 采纳率: 100%
浏览 86
已结题

position:relative 层级问题

    <div id="parent">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
    #parent{
        width: 100px;
        height: 100px;
        padding: 10px;
        margin: 5px;
        border: 3px solid pink;
    }
    #child1{
        width: 50px;
        height: 30px;
        background-color: burlywood;
    }
    #child2{
        width: 40px;
        height: 40px;
        background-color: blue;
    }

img

现在给 child1 设置相对定位,如下图。

img


问题:position:relative 不是可以提升层级吗,为什么这里第一个元素设置相对定位后,没有覆盖第二个元素呢?
设置absolute 和 fixed是可以的。

  • 写回答

4条回答 默认 最新

  • 关注

    absolute或者fixed定位会让元素脱离文档流,元素不会占据文档流中原本的空间,才能让之后的内容来占据这个元素让出的空间,产生覆盖重叠。
    而relative 不会让元素脱离文档流,元素还是会占据文档流中原本的空间。就不会与之后的内容覆盖重叠。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • CSDN专家-showbo 2021-09-15 15:52
    关注

    用下面代码修改做测试,对B div取消relative定位可以看出A位置没有变化,说明A是相对B原始位置定位而不是B重新定位后的位置定位。
    B改为absolute定位后,A相对于C定位,不在参考B

    有帮助麻烦点个采纳【本回答右上角】,谢谢~~

    img

    <!doctype html>
    <div style=" width: 100px; height: 100px; padding: 10px; margin: 5px; border: 3px solid pink;">
        <div style="width:100px;height:50px;background:#ccc">C</div>
        <div style=" width: 50px; height: 30px; background-color: burlywood; position: relative; top: 30px">B</div>
        <div style="width: 40px; height: 40px; background-color: blue; position: relative; z-index: 1; top: 20px">A</div>
    </div>
    
    
    评论
  • CSDN专家-Time 2021-09-15 14:55
    关注

    用z-index;

    评论
  • CSDN专家-showbo 2021-09-15 15:43
    关注

    relative是相对于之前的兄弟节点定位,假设这个节点为A(top:20px)。如果A前一个节点是absolute或者fixed定位脱离了文档流则往前找第一个非absolute或者fixed定位的兄弟节点,如果不存在此类节点则相对父元素定位。找到之前的兄弟节点后,假设为B,如果B是relative,则A是相对B原来的位置定位,而不是B按照自身样式定位后的位置定位,有点拗口,意思就是B relative 定位并且top:20px,A是相对原来B原来top:0时的位置定位,这样A和B会连一起,而不是隔开有20px空白了。

    如果absolute或者fixed定位,则会相对第一个出现的absolute,relative,fixed定位的父元素来定位,如果不存在则相对于body定位

    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 9月24日
  • 已采纳回答 9月16日
  • 创建了问题 9月15日

悬赏问题

  • ¥15 (关键词-聊天软件)
  • ¥15 求大家看看这个编程的编法没有思路啊
  • ¥20 WSL打开图形化程序子窗口无法点击
  • ¥15 Jupyter Notebook 数学公式不渲染
  • ¥20 ERR_CACHE_MISS 确认重新提交表单
  • ¥20 关于vba使用HTMLfile执行js函数问题
  • ¥60 悬赏求解,通过实时现场摄像头的视频图像识别其他对家打出的麻将牌,识别麻将牌,识别牌墙位置,通过识别对家打出了什么牌
  • ¥15 关于#GPU jetson#的pcie驱动开发问题,如何解决?
  • ¥15 stm32f103zet6 串口5无法收发数据
  • ¥15 关于C语言使用线程队列实现多线程并发