Xsh593 2021-06-30 20:43 采纳率: 0%
浏览 50

左浮动与右浮动对绝对定位元素有不同的影响?

父盒子开启相对定位,且其中设置了一个子元素为绝对定位,再设置另一个子元素左浮动,却挤开了绝对定位的元素,而设置成右浮动,绝对定位的元素能盖住浮动的元素。(我是从设置绝对定位的元素的层级比浮动的层级高,所以认为左浮动的元素应该也会被绝对定位的元素盖住,而这里就算绝对定位的z-index设置较大时,也还是被左浮动元素挤走

img

img

目前只有提醒自己设置了绝对定位后,记得设置初始值来避免这种问题的产生了,具体原因分析不出来。。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            position: relative;
            margin: 100px auto;
            width: 520px;
            height: 280px;
            background-color: pink;
        }

        .box1 .prev {
            width: 200px;
            height: 200px;
            background-color: black;
            float: left;
        }

        .box1 img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box1">
        <a href="#"><img src="./tb.jpg" alt=""></a>
        <div class="prev"></div>

    </div>
</body>

</html>
  • 写回答

2条回答 默认 最新

  • CSDN专家-文盲老顾 2021-06-30 20:47
    关注

    你再 .prev 上加一个 z-index:1; 再看看,另外,最主要的是,你的 absolute 元素,并没有设置坐标,在未给定坐标的情况下,默认按照未启用绝对坐标的布局来渲染

    评论

报告相同问题?

悬赏问题

  • ¥20 qt4代码实现二进制文件读取显示,以及显示的内容进行搜索
  • ¥15 Labview获取LK-G3001数据
  • ¥15 我知道什么是混合树,但是怎么写代码啊
  • ¥50 开发板linux系统安装dpkg,apt函数库 有偿
  • ¥15 浏览器时间循环 交互事件和延时事件的 优先级与执行问题
  • ¥15 GD模块安装出错,libgd无法正常安装
  • ¥20 求有缘人帮我把笛卡尔坐标系转换为经纬度 有偿
  • ¥15 vue2中使用计算属性
  • ¥50 远程桌面打开Mastercam、没有许可证、物理机打开正常
  • ¥15 ubuntu安装gdal后java读取tif文件报错