css - 如何修复弹出窗口 .circle？

Question

我有以下代码:

.container {
  background: #000;
  width:100%;
  min-height:800px;
  position:relative;
  z-index:0;
}

.popup {
  background:#fff;
  width:50%;
  height:70%;
  position:absolute; 
  overflow:auto;
  border: 4px solid #678;
  margin: auto;
  display:block;
  top: 0;  right: 0; bottom: 0; left: 0;
  z-index:100;
  border-radius:10px;
}

.popup h1 {
  display:block;
  font-size:24px;
  position:relative;
  text-align:center;
  top:20px;
}

.popup p {
  width:60%;
  margin:0 auto;
  display:block;
  padding-top:20px;
  padding-bottom:40px;
}

.popup img {
  
  widht:50%;
  height:50%;
  margin:0 auto;
  display:block;
  top:50;
}

.circle {
  position:absolute;
  z-index:600;
  right:450px;
  top:100px;
  display:block;
}

.circle button{
  display:block;
  color:#000;
    border-radius:50%;
  width:50px;
  height:50px;
  position:relative;
  background-color:#fff;
  border: 4px solid #678;
}

.circle button:hover {
  border: 5px solid #000; 
}

.show button{
  width:60%;
  height:40px;
  display:block;
  margin:auto;
  top:0; left:0; right:0; bottom:0;
}

<div class="container">
  <div class="popup">
      <h1>10 euro actie</h1>
    <img src="http://swbolt.gobizkorea.com/att/cat/a056078117086/tp_html/img/a056078117086_cat_958686_large_img1_2.jpg"></img>
      <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
</p>
    <div class="show">
      <button>Bekijk de actie</button>
    </div> 
    
  </div>
        <div class="closing">
          <div class="circle">
            <button>X</button>
          </div>
      </div>
</div>

我想要做的是圆圈固定在 Angular 落里。在桌面上停留在那里。但是当我最小化屏幕时，它正在改变位置。我该如何解决这个问题？

Answer 1

这里，需要把.closing移到.popup里面，去掉overflow: auto从.popup以便 .circle 在固定其位置后可见。

对您的 css 进行了其他更改以满足您的要求:

.container {
  background: #000;
  width: 100%;
  min-height: 800px;
  position: relative;
  z-index: 0;
}
.popup {
  background: #fff;
  width: 50%;
  height: 70%;
  position: absolute;
  border: 4px solid #678;
  margin: auto;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  border-radius: 10px;
}
.popup h1 {
  display: block;
  font-size: 24px;
  position: relative;
  text-align: center;
  top: 20px;
}
.popup p {
  width: 60%;
  margin: 0 auto;
  display: block;
  padding-top: 20px;
  padding-bottom: 40px;
}
.popup img {
  widht: 50%;
  height: 50%;
  margin: 0 auto;
  display: block;
  top: 50;
}
.closing {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: -25px;
}
.circle {
  z-index: 600;
}
.circle button {
  display: block;
  color: #000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: relative;
  background-color: #fff;
  border: 4px solid #678;
}
.circle button:hover {
  border: 5px solid #000;
}
.show button {
  width: 60%;
  height: 40px;
  display: block;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="container">
  <div class="popup">
    <h1>10 euro actie</h1>
    <img src="http://swbolt.gobizkorea.com/att/cat/a056078117086/tp_html/img/a056078117086_cat_958686_large_img1_2.jpg"></img>
    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus
      te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer
      recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
    </p>
    <div class="show">
      <button>Bekijk de actie</button>
    </div>
    <div class="closing">
      <div class="circle">
        <button>X</button>
      </div>
    </div>
  </div>
</div>