0

三角形が下に出ている境界線を持つボックスを作成しようとしています。この例は、このページのレビュー セクションで見ることができます: http://www.browserstack.com/

ボックスの上に重ねる三角形の画像を作成してエフェクトを作成しましたが、ボックスの上に配置するのに問題があります。

ここに私のHTMLコードがあります:

<div class="box">...</div>
<ul>
    <li>...</li>
</ul>

これが私のCSSです：

.box {
    background: none repeat scroll 0 0 #eee;
    border: 1px solid #aaa;
    margin: 0;
    position: relative;
    z-index: 1;
}

ul {
    margin: 0;
}

ul li {
    position: relative;
    z-index: 10;
}

ul li.active {
        background: url("testimonial-triangle.png") no-repeat scroll 108px -1px transparent;
}

ご覧のとおり、.box div と UL LI を相対的な位置に設定し、UL LI により大きな z-index を指定しようとしましたが、これは何もしていないようです。

編集: また、LI の代わりに UL にポジショニングと z-index を配置しようとしましたが、これも何もしていないようです。試したCSSは以下です。

.box {
    background: none repeat scroll 0 0 #eee;
    border: 1px solid #aaa;
    margin: 0;
    position: relative;
    z-index: 1;
}

ul {
    margin: 0;
    position: relative;
    z-index: 10;
}

ul li {}

ul li.active {
        background: url("testimonial-triangle.png") no-repeat scroll 108px -1px transparent;
}
4

1 に答える 1

1

これは、要素がDOMの同じレベルにないためです。z-indexを<UL>要素に配置する必要があります...ではなく<LI>。

于 2013-01-08T07:15:17.363 に答える