0

There is a screen that needs to be clicked and popped out. POP is pressed on the top of the whole screen. I set the following CSS:

position: fixed;
left: 0;
right: 0;
top: 0;

However but it did not cover the entire screen.

I searched the Internet and found that it was because the parent layer had a transform setting that prevented the pop from covering the screen, but on the parent layer I had to use the transform so I couldn’t remove it.

I wonder if you can do anything about it? I wrote a demo that I encountered a problem and would like to ask everyone to help me. Thank you everyone

$('.btn').on('click', function() {
  console.log(666)
  $('.pop').toggle();
  
  $('.close').on('click', function() {
    $('.pop').css('display', 'none')
  });
})
body {
  background-color: yellow;
}

.wrap {
  transform: translate(20%, 20%);
}

.pop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  display: none;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.close {
  margin-left: 60px;
}

.show {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="demo">
  <div class="wrap">
    <a href="javascript:;" class="btn">click pop</a>
    <div class="pop" style="display:none;">
      <div class="content">
        <h1>hello world!!</h1>
        <a class="close" href="javascript:;">X</a>
      </div>
    </div>
  </div>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
WEI A
  • 401
  • 3
  • 10
  • The problem is entirely caused by the use of `translate`. For what reason do you ***have*** to use it? There are a lot of alternative ways to re-position elements. – Rory McCrossan Sep 10 '21 at 08:49
  • *but on the parent layer I had to use the transform so I couldn’t remove it.* --> then you have no way to do what you want – Temani Afif Sep 10 '21 at 08:52

0 Answers0