Question

我希望text2显示为覆盖，但是将1个像素移动到text1的右侧（阴影效果，排序）。

我把每个放在一个嵌套的div中，位置为：relative;我已经设置了z-index 1和2

然而，这两个文本仍然出现在另一个之下。解决方法是使text2 减去 28中的顶部，但我对概念relative和z-index缺少什么？

HTML：

<body>
<div id='titles'>
  <div id='text1'>Text For Testing This</div>     <div id='text2'>Text For Testing This</div>
</div>
</body>

CSS：

body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:62.5%;
  background-color:#666666;
}
#titles {
  color:#FFFFFF;
  width:800px;
  font-size:2rem;
  margin-left:auto;
  margin-right:auto;
}
#text1 {
  position:relative;
  width:98%;
  top:8px;
  left:8px;
  z-index:1;
  }
#text2  {
  position:relative;
  width:98%;
  top:8px;
  left:9px;
  color:#000000;
  z-index:2;
  }

Answer 1

您希望这些头寸是绝对的而不是相对的。因为relative将它相对于前一个元素，而绝对将它放在它的父元素上。 See an example here

#titles {
  position:relative;
  color:#FFFFFF;
  width:800px;
  font-size:2rem;
  margin-left:auto;
  margin-right:auto;
}
#text1 {
  position:absolute;
  width:98%;
  top:8px;
  left:8px;
  z-index:2;
  }
#text2  {
  position:absolute;
  width:98%;
  top:10px;
  left:10px;
  color:#000000;
  z-index:1;
  }

Answer 2

#text1 {
   position:absolute; // it's relative in your css
   width:98%;
   top:8px;
  left:8px;
  z-index:1;
}
#text2  {
  position:absolute; // it's relative in your css
  width:98%;
  top:8px;
  left:9px;
  color:#000000;
  z-index:2;
}

DEMO.

Answer 3

您需要将text1, text2位置设置为绝对位置，将titles位置设置为相对位置，然后将文本div设置为相对于标题。

#titles {
  position:relative;
  color:#FFFFFF;
  width:800px;
  font-size:2rem;
  margin-left:auto;
  margin-right:auto;
}
#text1 {
  position:absolute;
  width:98%;
  top:8px;
  left:8px;
  z-index:1;
}
#text2  {
  position:absolute;
  width:98%;
  top:8px;
  left:9px;
  color:#000000;
  z-index:2;
}

简单的css：重叠的div移动了一个像素

3 个答案: