CSS-граница перекрывается дочерним элементом - PullRequest
Новая
       6

CSS-граница перекрывается дочерним элементом

0 голосов
/ 08 ноября 2011

Смотрите здесь:

http://jsfiddle.net/cnJ6q/

Я не могу просто добавить границу к дочернему элементу, ее нужно добавить к родителю (.dc-slick) - Есть ли способ исправить это? Z-index, похоже, не помогает.

Спасибо.

Ответы [ 3 ]

1 голос
/ 08 ноября 2011

Дочерний div наследует z-index своего родителя, независимо от того, что вы используете.

Проблема здесь заключается в несовпадении границ границ. Используйте одинаковый радиус границы для каждого элемента, в противном случае вы получите это перекрытие. 

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

Обновленный пример .

0 голосов
/ 08 ноября 2011

Вы должны иметь цвет фона и границу на одном элементе, поэтому переместите 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/

0 голосов
/ 08 ноября 2011

Есть 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;
}
...