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>

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

Answer 1

在此，您需要在template t_msg_only { template("${MSG}\n"); }; destination loghost { tcp("*.*.*.*" port(5140) template(t_msg_only) ); }内移动.closing，从.popup移除overflow: auto，以便在确定其位置后.popup可见。

对您的CSS进行了其他更改以满足您的要求：

＆＃13;

.circle

＆＃13;

.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;
}

＆＃13;

如何修复弹出.circle？

1 个答案: