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属性，而不是在其中放置Network$RegisterName。关闭图标应该是可见的，您可以使用它的CSS定位，因为您已经例如与<img src="background.jpg" alt="homeScreen" class="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 个答案: