带位置的 Z 索引：相对答案

【问题标题】：Z-Index With Position: Relative带位置的 Z 索引：相对
【发布时间】：2015-04-24 08:22:21
【问题描述】：

我正在尝试将移动应用设计转移到网站中。我需要在不同分辨率的屏幕和窗口大小上将一些元素保留在同一个地方。我对所有定位都使用相对定位，但似乎无法使用 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>

【问题讨论】：

我建议使用引导程序让生活更轻松。
how to use z-index with relative positioning?的可能重复

标签： html css position z-index

【解决方案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;
    }

结果：

【讨论】：

如果我对两个对象都使用绝对定位，它们根本不会移动。所有对象都转到 css 中级联的第一个对象所在的位置。所以在这种情况下，它将是 #homebttn 并且不会移动。
通过向 css 添加 top/bottom/left/rigth 属性来控制对象的位置。请参阅上面的示例。