-1

CSSに問題がある

<div id="all-letter2" style="margin-left:40px; margin-right:57px;">
   <div class="inhalt" style="font-size:17px;">
      <div class="line1" style="position: absolute; margin-left:-80px; width:30px; color:gray;   height:10px; font-size:22px; font-weight:470; margin-top:-590px;z-index:10;">_

    </div>    
  </div>
</div>

どのように設定できclass="line1">ますclass="inhalt"か? z-index?

4

4 に答える 4

2

例にあるネストされた要素でhttp://cdn.onextrapixel.com/wp-content/uploads/2009/05/zindex.jpgを模倣しようとしている場合は、親コンテナに相対位置。これにより、子要素がその位置を決定するために上端と左端を使用することが保証されます。このlist a part articleは、その理由を説明する優れた仕事をしています。したがって、htmlは次のとおりです。

<div id="all-letter2">
   <div class="inhalt">
      <div class='line1'></div>
   </div>
</div>

そしてあなたのcssは次のようになります：

#all-letter2
{
    height:30px;
    width:30px;
    background:orange;
    position:relative;
    top:10px;
    left:10px;
}
.inhalt
{
    height:30px;
    width:30px;
    background:blue;
    position:absolute;
    top: 10px;
    left:10px;
}
.line1
{
    height:30px;
    width:30px;
    background:green;
    position:absolute;
    top:10px;
    left:10px;
}

視覚的な例は、このフィドルにあります: http://jsfiddle.net/7CL54/

于 2013-10-31T15:05:06.007 に答える
0

その上に設定しようとしている場合は、タイトルで言ったように使用してください：

CSS

.inhalt {
position: relative;
z-index: 1000;
}
.line1 {
position: relative;
z-index: 2000;
}

HTML

<div class="inhalt" style="font-size:17px;"></div>

<div class="line1" style="font-size:17px;">
于 2013-10-31T14:53:02.290 に答える
0

私の理解が正しければ、中に入れたい.line1です.inhaltか？

その場合は、 div.inhaltを絶対位置 (既に持っている) よりも相対的に配置します。.line1

<div class="inhalt" style="font-size:17px; position: relative;">
于 2013-10-31T14:47:42.127 に答える
0

.line1下にしたい場合はinhalt、それらを絶対に配置できますall-letter2。

CSS

#all-letter2 {
  position:relative;
  margin: 0 57px 0 40px;
}

.inhalt {
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}
.line {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
于 2013-10-31T15:02:47.933 に答える