CSS设置弹窗引发的思考,absolute和fixed的区别

最新推荐文章于 2023-08-14 17:18:31 发布

编程小飞

最新推荐文章于 2023-08-14 17:18:31 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/qq_44606064/article/details/117080348

版权

刚需css还真没想太多，项目中不断练习才不断的有了收获。关于这个的详细解释MDN,这里做个记录备忘。本文涉及到的关键
在这里插入图片描述

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width: 400px;
    height: 400px;
    position: relative;
    overflow: hidden;
    background-color: yellowgreen;
  }
  .inner{
    visibility:hidden;
    /* position: fixed; */
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inner-container{
    background-color: white;
    position: relative;
  }
</style>
<body>
  <div class="box">
    <div>店铺一</div>
    <div>店铺一</div>
    <div>店铺一</div>
    <div>店铺一</div>
    <button id = 'test'>click me</button>
      <div class="inner">
        <div class="inner-container">
          <div>特价优惠活动</div>
          <div>全场满50-10</div>
          <div>全场满100-25</div>
          <div>快来抢购</div>
          <button class="close">关闭</button>
        </div>
      </div>
  </div>
  <div class="test">
    <div class="inner">123</div>
  </div>
</body>
<script>
  const tip = document.querySelector('#test')
  const inner = document.querySelector('.inner')
  tip.addEventListener('click',function(){
    inner.style.visibility = 'visible'
  })
  const close = document.querySelector('.close')
  close.addEventListener('click',function(){
    inner.style.visibility = 'hidden'
  })
</script>