将固定div定位在固定div内

Question

我努力将固定的div放在另一个固定的div中。我尝试过很多东西但却无法集中精力。我怎么能这样做？

＆＃13;

＆＃13;

.overlay {
    background: rgba(0, 0, 0, .60);
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity .25s ease;
    z-index: 3;
    margin: 0 auto;


}

.ques_preview_div {

    width: 60em;
    height: 30em;
    top: 20%;
    position: fixed;
    background-color: #adadad;
    margin: 0 auto;
    z-index: 4;
}

＆＃13;

<div class="overlay">

<div class="ques_preview_div">

</div>

</div>

＆＃13;

＆＃13;

＆＃13;

通过给出相对于ques_preview_div的位置，我可以实现我所需要的。但我需要它来固定位置。

Answer 1

将right:0; left:0设置为.ques_preview_div，请使用整个代码段进行检查

＆＃13;

＆＃13;

.body {
    margin:0;
}
.overlay {
    background: rgba(0, 0, 0, .60);
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity .25s ease;
    z-index: 3;
    margin: 0 auto;


}

.ques_preview_div {

    width: 60em;
    height: 30em;
    top: 20%;
    position: fixed;
    background-color: #adadad;
    margin: 0 auto;
    z-index: 4;
    right:0;
    left:0;
}

＆＃13;

<div class="overlay">

<div class="ques_preview_div">

</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将CSS3属性transform: translate(-50%, -50%);与top和left一起使用。

.overlay {
  background: rgba(0, 0, 0, .60);
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity .25s ease;
  z-index: 3;
  margin: 0 auto;
}

.ques_preview_div {
  width: 60em;
  height: 30em;
  position: fixed;
  background-color: #adadad;
  margin: 0;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="overlay">
  <div class="ques_preview_div">
  </div>
</div>

Answer 3

在课程的宽度和高度上使用像素（px）而不是em来设置ques_preview_div

.overlay {
    background: rgba(0, 0, 0, .60);
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity .25s ease;
    z-index: 3;
    margin: 0 auto;


}

.ques_preview_div {

    width: 60px;
    height: 30px;
    top: 20%;
    position: fixed;
    background-color: #adadad;
    margin: 0 auto;
    z-index: 4;
}

<div class="overlay">

<div class="ques_preview_div">

</div>

</div>