2

我希望 text2 出现重叠但将 1 个像素移到 text1 的右侧（阴影效果，有点）。

我把每个都放在一个嵌套的div中，位置：相对；我设置了 z-index 1 和 2

但是，这两个文本仍然显示在另一个之下。解决方法是让 text2 中的顶部减去28，但是关于相对和 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;
  }
4

3 回答 3

1

您将希望位置是绝对的而不是相对的。因为 relative 将其相对于前一个元素，而 absolute 将其相对于其父元素。请参阅此处的示例。

#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;
  }​​
于 2012-04-28T17:20:56.607 回答
0 
#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;
}

演示。

于 2012-04-28T17:21:21.347 回答
0

您需要将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;
}
于 2012-04-28T17:21:57.857 回答