css中如何解决绝对定位元素被遮挡的问题

草莓千层蛋糕
2,820 阅读2分钟

“ 本文正在参加「金石计划」 ”

问题：绝对定位没显示

image.png

image.png

发现加了overflow 就会被隐藏

原因：

image.png

案例演示：

image.png

image.png

<!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>
      .wrap {
        margin-left: 200px;
        margin-top: 200px;
        width: 400px;
        height: 500px;
        border: 1px solid red;
        /* overflow: auto; */
        position: relative;
        overflow-y: scroll;
      }
      .son {
        position: absolute;
        /* left: 50px; */
        left: -50px;
        width: 50px;
        height: 50px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="son"></div>
      //向数组开头添加一个或多个元素，并返回新的长度，该方法改变原数组 let
      person= ['张三', '李四', '王五']; console.log(person.unshift('小明')); //
      4 console.log(person); // ["小明", "张三", "李四 ————————————————
      版权声明：本文为CSDN博主「react-dev」的原创文章，遵循CC 4.0
      BY-SA版权协议，转载请附上原文出处链接及本声明。
      原文链接：https://blog.csdn.net/weixin_45506717/article/details/124378224//向数组开头添加一个或多个元素，并返回新的长度，该方法改变原数组
      let person= ['张三', '李四', '王五']; console.log(person.unshift('小明'));
      // 4 console.log(person); // ["小明", "张三", "李四 ————————————————
      版权声明：本文为CSDN博主「react-dev」的原创文章，遵循CC 4.0
      BY-SA版权协议，转载请附上原文出处链接及本声明。
      原文链接：https://blog.csdn.net/weixin_45506717/article/details/124378224//向数组开头添加一个或多个元素，并返回新的长度，该方法改变原数组
      let person= ['张三', '李四', '王五']; console.log(person.unshift('小明'));
      // 4 console.log(person); // ["小明", "张三", "李四 ————————————————
      版权声明：本文为CSDN博主「react-dev」的原创文章，遵循CC 4.0
      BY-SA版权协议，转载请附上原文出处链接及本声明。
      原文链接：https://blog.csdn.net/weixin_45506717/article/details/124378224
    </div>
  </body>
</html>

解决方案：

父级的overflow: hidden;需要去掉 里面盒子的高度为 height: 100%;

滚动.gif

<!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>
      .wrap {
        margin-left: 200px;
        margin-top: 200px;
        width: 400px;
        height: 500px;
        /* height: auto; */
        border: 1px solid red;
        position: relative;
        /* overflow: hidden; */
      }
      .son {
        position: absolute;
        /* left: 50px; */
        left: -50px;
        width: 50px;
        height: 50px;
        background-color: yellow;
      }
      .main {
        height: 100%;
        overflow: auto; /* 设置盒子内部出现滚动条 */
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="son"></div>
      <div class="main">
        <p>
          //向数组开头添加一个或多个元素，并返回新的长度，该方法改变原数组 let
          person= ['张三', '李四', '王五']; console.log(person.unshift('小明'));
          // 4 console.log(person); // ["小明", "张三", "李四 ————————————————
          版权声明：本文为CSDN博主「react-dev」的原创文章，遵循CC 4.0
          BY-SA版权协议，转载请附上原文出处链接及本声明。
          原文链接：https://blog.csdn.net/weixin_45506717/article/details/124378224//向数组开头添加一个或多个元素，并返回新的长度，该方法改变原数组
          let person= ['张三', '李四', '王五'];
          console.log(person.unshift('小明')); // 4 console.log(person); //
          ["小明", "张三", "李四 ————————————————
          版权声明：本文为CSDN博主「react-dev」的原创文章，遵循CC 4.0
          BY-SA版权协议，转载请附上原文出处链接及本声明。
          原文链接：https://blog.csdn.net/weixin_45506717/article/details/124378224//向数组开头添加一个或多个元素，并返回新的长度，该方法改变原数组
          let person= ['张三', '李四', '王五'];
          console.log(person.unshift('小明')); // 4 console.log(person); //
          ["小明", "张三", "李四 ————————————————
          版权声明：本文为CSDN博主「react-dev」的原创文章，遵循CC 4.0
          BY-SA版权协议，转载请附上原文出处链接及本声明。
          原文链接：https://blog.csdn.net/weixin_45506717/article/details/124378224
          console.log(person.unshift('小明')); // 4 console.log(person); //
          ["小明", "张三", "李四 ————————————————
          版权声明：本文为CSDN博主「react-dev」的原创文章，遵循CC 4.0
          BY-SA版权协议，转载请附上原文出处链接及本声明。
          原文链接：https://blog.csdn.net/weixin_45506717/article/details/124378224
          console.log(person.unshift('小明')); // 4 console.log(person); //
          ["小明", "张三", "李四 ————————————————
          版权声明：本文为CSDN博主「react-dev」的原创文章，遵循CC 4.0
          BY-SA版权协议，转载请附上原文出处链接及本声明。
          原文链接：https://blog.csdn.net/weixin_45506717/article/details/124378224
        </p>
      </div>
    </div>
  </body>
</html>
avatar
文章
阅读
粉丝