Question

我正在尝试将移动应用设计转移到网站中。我需要在不同的分辨率屏幕和窗口大小的同一个地方保留一些元素。我使用相对定位来定位我的所有定位，但我似乎无法使用Z-Index来重叠元素。另一个线程没有回答我的问题，因为我不使用JavaScript是不一样的情况。我怎样才能让它发挥作用？ Here is what I am trying to do:

这是我的代码：

＆＃13;

	/* Font */
	@font-face {
	  font-family: Museo300-Regular;
	  src: url(Museo300-Regular.otf)
	}
	/* Nav */
	html {
	  height: 100%
	}
	body {
	  background-image: url('images/bg-img.jpg');
	  font-family: Museo300-Regular, Museo700-Regular;
	  display: flex;
	  height: 100%;
	  align-items: center;
	  justify-content: center;
	}
	#wrapper {
	  position: relative;
	}
	#wrapper > div {
	  border-radius: 50%;
	  width: 960px;
	  height: 100%;
	  overflow: hidden;
	  margin: auto;
	  position: relative;
	}
	#wrapper > div#home {
	  width: 255px;
	  height: 254px;
	  position: relative;
	  top: 50%;
	  left: 50%;
	  -moz-transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  /* IE 9 */
	  -webkit-transform: translate(-50%, -50%);
	  /* Safari */
	  transform: translate(-50%, -50%);
	}
	#wrapper > div#contact {
	  width: 255px;
	  height: 254px;
	  position: relative;
	  top: 70%;
	  left: 40%;
	  -moz-transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  /* IE 9 */
	  -webkit-transform: translate(-50%, -50%);
	  /* Safari */
	  transform: translate(-50%, -50%);
	}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Micah Friesen</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body id="body">
  <!-- page content -->
  <!-- Navigation -->
  <div id="wrapper">
    <div id="home">
      <a href="index.html">
        <img src="images/homebttn.png" title="Homepage (Here)" />
      </a>
    </div>
    <div id="contact">
      <a href="contact.html">
        <img src="images/contactbttn.png" title="Contact Me, this also includes Rates" />
      </a>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

听起来你想把元素放在屏幕上明确定位的位置。因此，使用相对位置不是好的做法，因为这些元素将相互依赖。例如，如果你想移动一个元素，它可能也会移动其他元素。

更好的选择是对元素使用绝对或固定位置。您可以在此处找到更多详细信息：http://www.w3schools.com/css/css_positioning.asp

另外，在我的例子中，我使用了＆＃39; vh＆＃39;单位（矢量高度）巫婆缩放元素以适应屏幕大小。请注意，它是新单位，因此在旧版浏览器中可能不支持它们。

简单示例：

<html>
<head>
    <title>Example</title>
    <link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
    <div id="aboutMe"></div>
    <div id="contactMe"></div>
    <div id="news"></div>
</body>
</html>

CSS：

    body {
        margin: 0;
    }

    #aboutMe {
        position: absolute;
        top: 20vh;
        width: 40vh;
        height: 50vh;
        background-color: blue;
    }

    #contactMe {
        position: absolute;
        top: 70vh;
        width: 40vh;
        height: 20vh;
        background-color: green;
    }

    #news {
        position: absolute;
        top: 20vh;
        left: 40vh;
        width: 40vh;
        height: 70vh;
        background-color: orange;
    }

结果：

Example

带位置的Z指数：相对

1 个答案: