1

親divと同じレベルのdivの上に子div（親コンテナ内にある）を表示したいと思います。jQueryとCSSを使用してz-indexを操作できます。以下の例では、カレンダーをgridRightの上に配置したいのですが、z-indexが1000でgridRightが2の場合でも、その上には表示されません。ユーザーはカレンダーをドラッグできます。カレンダーがgridRightの上に表示されるようにするにはどうすればよいですか？

-要素にはプロパティの位置があります：absolute

これが基本的なJSFiddlehttp : //jsfiddle.net/LTRyd/1/です。

  • 赤い四角を緑の四角の上に移動できるようにしたいのですが、黒い四角はまだ緑の四角の下に表示されます。

    <div id="mainContainer" class="mainContainer">
     <div id="grid1" class="grid"> <!--Has to have Z-Index of 1-->
          <div id="Calendar" class="item"></div> <!--Z-Index of 1000-->
</div>            
</div>
<div id="gridLeft" class="gridLeft"></div> <!--Has to have Z-Index of 2-->
<div id="gridRight" class="gridRight"></div> <!--Has to have Z-Index of 2-->
4

1 に答える 1

3

Z-Index only takes effect on positioned elements.

You will have to alter your CSS to position the elements you want z-indexed:

#Calendar
{
  position: relative;
  z-index: 20;
}

#grid2
{
  position: relative;
  z-index: 10;
}

edit:

"Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context."

The stacking context - MDN

Essentially, stacking is resolved within the parent element. All stacking occurs within the parent, and then that parent's stacking order is in the context of its other siblings, regardless of the stacking order of the children within it.

So while Calendar will have a z-index of 1000, that z-index will only apply against the stacking of other children of grid1

于 2012-06-21T13:42:32.183 に答える