2

要素を互いの上に配置することに問題があります。ここに私のマークアップがあります:

<div id="glownySlajder">

                <ul>
                    <li>
                        <img src="inc/img/slajder_bg.jpg" alt="Slajd" class="slajd">
                        <div class="fr">
                            <a href="#" class="przyciskPoprzednia fl" title="Poprzednia"><img src="inc/img/strzalka_lewo.png" alt="strzalka_lewo"></a>
                            <p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet consequat gravida. Nunc sed risus est, ac vestibulum nisl. Suspendisse sagittis velit a massa auctor accumsan. Aliquam hendrerit libero tellus, at molestie leo. Curabitur sodales </p>
                            <a href="#" class="przyciskNastepna fr" title="Następna"><img src="inc/img/strzalka_prawo.png" alt="strzalka_prawo"></a>
                        </div>

                    </li>
                 </ul>
         </div>

これが私のcssです：

#glownySlajder {
    margin-bottom: -2px;
}

#glownySlajder a {
    margin: 7px;
}

#glownySlajder ul li img {

    z-index: 9998;
}

#glownySlajder div {        
    z-index: 9999;
    color: black;
    background-color: #e7e7e7;
    height: 85px;
    width: 500px;
    padding: 0px 5px;

}

#glownySlajder div p {

    font-size: 11px;
    line-height: 14px;
    margin-top: 20px;
    width: 390px;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

これは私が得るものです：

最初の画像

これは私が達成したいです：

2 番目の画像

問題は、z-index が機能していないように見えることです。divwithで負のマージンを実行しようとするとp、正確に望むものではなく、画像の下に消えてしまいます。

自力で解決できないのですが、アドバイスお願いします。

4

1 に答える 1

13

まず、z-indexブロック要素 ( display:block) でのみ機能します。第 2 に、同じスタッキング コンテキスト内にある要素に対してのみ有用です。第三に、位置に慣れないでくださいmargin。position:これにはとtop、left、rightを使用bottomします。

参考文献:

于 2012-10-06T17:22:07.447 に答える