1

親 div を overflow:auto で使用すると、box-shadow が停止します。これを修正するにはどうすればよいですか? ここで、position:relative と z-index を使用する必要があることがわかりましたが、うまくいかないようです。

HTML:

<ul>
    <li><img src="http://lorempixel.com/100/100" />Tri-tip fatback sausage speck, pork chop pastrami flank sirloin filet mignon t-bone rump ribeye chicken venison. Shankle ground round pancetta pastrami, sirloin beef ribs pork chop short loin. Salami pork boudin, ham hock flank tri-tip drumstick turkey shank short loin beef ribs kielbasa tail pastrami. Kielbasa beef ribs chicken, turkey drumstick bresaola sirloin ball tip chuck pig andouille. Cow sirloin shoulder beef ribs strip steak tongue jerky. Spare ribs capicola swine fatback, corned beef jerky kielbasa frankfurter pancetta flank sirloin short loin.</li>
    <li><img src="http://lorempixel.com/100/100" />Strip steak speck tri-tip drumstick pork chop spare ribs.</li>
    <li><img src="http://lorempixel.com/100/100" /></li>
    <li><img src="http://lorempixel.com/100/100" /></li>
</ul>​

CSS:

ul{margin:10px;position:relative;z-index:18;}
li{overflow:auto;margin-bottom:10px;position:relative;z-index:19;}
li:hover{background:lightblue;}
li img{float:left; box-shadow:0 0 10px black; margin: 0 10px 10px 0;display:block;position:relative;z-index:20;}

デモ: http://jsfiddle.net/suNUK/1/

4

1 に答える 1

1

このために、このためのメソッドをクリアすることができます。このように書いてください：

li{margin-bottom:10px;position:relative;z-index:19;}
li:after{
    content:'';
    clear:both;
    display:block;
}

これをチェックしてくださいhttp://jsfiddle.net/suNUK/2/

于 2012-06-08T07:48:03.093 に答える