2

HTML ページでの要素のスタックに問題があります。ボーダー付きのdiv (class= "class_div" )よりも高いスタック順序を持つために、スパン(class= "class_span" )を取得する必要があります。z-index を変更しようとしましたが、うまくいきませんでした。絶対位置を使用すべきではないことはわかっていますが、ページは絶対位置に依存しています。申し訳ありません。どうすればこれを達成できますか?

HTML :

<ul>
    <li>
        <div class="class_div">
        </div>
        <span class="class_span">
            <a href="google.com">google</a>
        </span>
    </li>
</ul>​

CSS :

.class_div{
    position: absolute; 
    border: 100px solid; 
    width:100px;
    height:50px;
    left:0px;
}
.class_span{
    float: left;
}​

ライブデモ

4

3 に答える 3

2

position: relative適用できるようにスパンに追加しますz-index。スパンの は、 の上に表示されるようにz-index、 のスパンよりも高くする必要があることに注意してください。divdiv

.class_div{
    position: absolute; 
    border: 100px solid; 
    width:100px;
    height:50px;
    left:0px;
    z-index: 1;
}
.class_span{
    float: left;
    position: relative;
    z-index: 10;
}​

例

編集：

の代わりに、次のように設定しfloat: leftて使用することを検討してください。position: absoluteleft0px

.class_span{
    position: absolute;
    left: 0;
    z-index: 10;
}​

も設定する必要がある場合があり、親要素を基準にしてスパンを配置できるように、親要素のtotopを設定する必要がある場合もあります。positionrelative

于 2012-08-03T13:25:48.110 に答える
1

こちらをご確認ください。 http://jsfiddle.net/YMrLd/18/

次のCSSはフィドルリンクにあります。

.class_div{
    position: absolute; 
    border: 100px solid; 
    width:100px;
    height:50px;
    left:0px;
}
.class_span{
    position: absolute; 
    top: 100px;
    left: 100px;
}​

そして、私にあなたが何か違うものが必要であることを知らせてください。それでも問題が解決しない場合は、目的の出力のスクリーンショットを添付してください。

于 2012-08-03T13:31:57.683 に答える
1

position:absoluteフローから要素を削除します。より高いpositionで onも使用する必要があります。.class_spanz-index

于 2012-08-03T13:25:02.927 に答える