带位置的 Z 索引：相对

Question

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

这是我的代码：

 /* 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%);
 }

<!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>

Answer 1

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

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

此外，在我的示例中，我使用 'vh' 单位（矢量高度）缩放元素以适合屏幕尺寸。请注意，这是新单位，因此它们可能不支持非常旧的浏览器。

简单示例：

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

结果：

带位置的 Z 索引：相对

Z-Index With Position: Relative

html

css

position

z-index