2

text2 を重ねて表示したいのですが、text1 の右に 1 ピクセル移動しました (影の効果など)。

position:relative; でネストされた div にそれぞれを入れました。z-index 1 と 2 を設定しました

ただし、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 に答える