如何移動“退出”按鈕，使其位於模式框的右上角？

Question

詳細信息：我有一個背景圖像，並且有一個我要放在Illustrator中的正方形圖像，我想將它放在頂部。 （這是將打開模式窗口的按鈕）。但是，模式窗口的“關閉”按鈕顯示在我的背景圖像下方，而不是模式窗口的右上角。 我是HTML / CSS的新手，感謝您的幫助！

這是我的style.css：

div {
   position: relative;
   top: 0;
   left: 0;
}

.home {
   position: relative;
   top: 0;
   left: 0;
}

.city1 {
   position: absolute;
   top: 350px;
   left: 40px;
}

#overlay {
   visibility: hidden;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   text-align: center;
   z-index: 1000;
}

#overlay div {
   width: 600px;
   height: 600px;
   top: 300px;
   left: 220px;
   background-color: #FFF;
   padding: 15px;
   text-align: center;
}

這是我的test.html：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <script src="popUp.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
   <div>
      <img src="background.jpg" alt="homeScreen" class="home"/>
      <div id="overlay">
         <div>
            <img src="" alt="province1"/>
         </div>
      </div>

      <img src="city1.png" class="city1" onclick='overlay()'></a>
   </div>
      <a href='#' onclick='overlay()'><img src="exit.png" class="exit"/></a>
</body>
</html>

這是我的popUp.js：

function overlay() {
   el= document.getElementById("overlay");
   el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Answer 1

如果要具有背景圖像，則在適當的div上使用CSS background-image屬性，而不要在其中放置<img src="background.jpg" alt="homeScreen" class="home"/> 。 然后，關閉圖標應該是可見的，並且可以使用它的CSS位置進行播放，就像使用home類所做的那樣。

Answer 2

第一步，應將<a href='#' onclick='overlay()'><img src="exit.png" class="exit"/></a>放置在疊加層<div> 。 然后，將圖標移到右上角就是應用正確的CSS屬性的問題，例如http://www.w3schools.com/css/css_positioning.asp

如何移動“退出”按鈕，使其位於模式框的右上角？

問題描述

2 個解決方案

解決方案1
0 已采納 2015-11-06 21:35:42

解決方案2
0 2015-11-06 21:40:04

如何移動“退出”按鈕，使其位於模式框的右上角？

問題描述

2 個解決方案

解決方案1 0 已采納 2015-11-06 21:35:42

解決方案2 0 2015-11-06 21:40:04

解決方案1
0 已采納 2015-11-06 21:35:42

解決方案2
0 2015-11-06 21:40:04