Question

页面上有几个div元素，每个元素都有自己的边框。问题是较低的div边界（“#a”）是可见的，尽管其他元素（“＃b”，“c＃”）位于其上方。

请参阅以下JS小提琴示例和代码：http://jsfiddle.net/4jntf/

HTML：

<div id="container">
    <div id="a"></div>
    <div id="b" class="quarter"></div>
    <div id="c" class="quarter"></div>
</div>

CSS：

#container {
    position: absolute;
}

#a {
    background: none repeat scroll 0 0 #0099FF;
    border-style: solid;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
    border-width: 4px;
    height: 50px;
    position: absolute;
    width: 104px;
    border-color: #ff0000;
}

#b {
    border-top-left-radius: 55px;
    border-width: 4px 2px 4px 4px;
    float: left;
}

#c {
    border-width: 4px 4px 4px 2px;
    border-top-right-radius: 55px;

    float: right;
}
.quarter {
    background: none repeat scroll 0 0 #0099FF;
    border-style: solid;
    height: 50px;
    width: 50px;
}

我想要的效果是始终看到中间的一行，点击按钮即可看到所需的效果。

我能够获得所需效果的唯一方法是给div“#a”CSS z-index为-1，但这会导致页面中的所有其他元素位于其顶部并且几乎不可见。< / p>

Answer 1

只需将#a背景设置为透明？

http://jsfiddle.net/4jntf/1/

#a {
    background: none repeat scroll 0 0 transparent;
    border-style: solid;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
    border-width: 4px;
    height: 50px;
    position: absolute;
    width: 104px;
    border-color: #ff0000;
}

Answer 2

试试这个：

#a {
    background: none repeat scroll 0 0 #0099FF;
    border-style: solid;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
    border-width: 4px;
    height: 50px;
    width: 104px;
    border-color: #ff0000;
    float: left;
    margin-right: -112px;
}

工作样本：http://jsfiddle.net/H2jey/

Answer 3

你想要像this这样的东西吗？

<强> HTML

<div id="container">
    <div id="a"></div>
    <div id="b" class="quarter"></div>
    <div id="c" class="quarter"></div>
    <div id="d" class="line"></div>
</div>
<input type="button" value="change">

JAVASCRIPT

$(document).ready(function () {
    $("input").click(function () {
        if ($("#a").is(":visible")) {
                $("#a").hide();
            $("#d").css('z-index', -1);
            } else {
                $("#a").show();
                $("#d").css('z-index', 1);
            }        
    });
});

<强> CSS

#container {
    position: absolute;
}
#a {
    background: none repeat scroll 0 0 #0099FF;
    border-style: solid;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
    border-width: 4px;
    height: 50px;
    position: absolute;
    width: 104px;
    border-color: #ff0000;
}
.line{
    width: 4px;
    position: absolute;
    height: 55px;
    left: 54px;
    z-index: 5;
    background: red;
}
#b {
    border-top-left-radius: 55px;
    border-width: 4px 2px 4px 4px;
    float: left;
}
#c {
    border-width: 4px 4px 4px 2px;
    border-top-right-radius: 55px;

    float: right;
}
.quarter {
    background: none repeat scroll 0 0 #0099FF;
    border-style: solid;
    height: 50px;
    width: 50px;
}
input {
    position: absolute;
    top: 200px;
}

虽然上部div具有其他边界，但可以看到下部div边界

3 个答案: