Question

见这里：

我不能只是将边框添加到子元素，它需要添加到父元素（.dc-slick） - 有什么办法可以解决这个问题吗？ Z-index似乎没有帮助。

感谢。

Answer 1

无论您使用什么，子div都将继承其父级的z-index。

这里的问题是边界半径不匹配。在每个元素上使用相同的边界半径，否则您将获得此重叠。

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

Updated example

Answer 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 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/

由儿童元素重叠的CSS边界

3 个答案: