CSSボーダーオーバーラップして、子要素

Question

はここを参照してください：私はちょうど子要素に境界線を追加することはできません

http://jsfiddle.net/cnJ6q/

、それは（.DC-スリック）親に追加する必要があります - ですこれを修正する方法はありますか？ Z-インデックスは役に立たないようです。

ありがとうございました。

Answer 1

2つの方法があります。 1）子要素は変形されていない親要素と同じサイズをとる。次に、親要素にキャストする必要があります

.dc-slick { 

    border: 3px solid red; 
    right: 0px; 
    left: 0px; 
    position: fixed; 
    border-bottom-left-radius: 30px 30px; 
    border-bottom-right-radius: 30px 30px; 
    z-index: 10001; 
    margin-top: 0px; 
    background: black; 
} 

.dc-slick-content { 

    color:white; 
    z-index:9999; 
    width: 100%; 
    height: 200px; 
    border-bottom-left-radius: 15px 15px; 
    border-bottom-right-radius: 15px 15px; 
} 

2）親と同じ方法で拡大縮小する必要があります。

.dc-slick { 

border: 3px solid red; 
    right: 0px; 
    left: 0px; 
    position: fixed; 
    border-bottom-left-radius: 30px 30px; 
    border-bottom-right-radius: 30px 30px; 
    z-index: 10001; 
    margin-top: 0px; 

} 

.dc-slick-content { 

    background: black; 
    color:white; 
    z-index:9999; 
    width: 100%; 
    height: 200px; 
    border-bottom-left-radius: 28px 28px; 
    border-bottom-right-radius: 28px 28px; 
} 

Answer 2

子divは、使用するものに関係なく、親のZ-インデックスを継承します。

ここで問題となるのは、境界半径の不一致です。各要素に同じボーダー半径を使用します。そうでなければ、このオーバーラップを取得します。

border-bottom-left-radius: 30px 30px; 
border-bottom-right-radius: 30px 30px; 

Updated example。

Answer 3

あなたは、背景色と同じ要素に境界線を持っているので、background: black

.dc-slickから

.dc-slick { 
    background: black; 
} 

.dc-slick-content { 
    /*background: black;*/ 
    /*border-bottom-left-radius: 15px 15px;*/ 
    /*border-bottom-right-radius: 15px 15px;*/ 
} 

JSFidle更新

移動する必要があります：http://jsfiddle.net/RxyRV/