1

我在页面上有几个 div 元素，每个元素都有自己的边框。问题是下 div 边框 ("#a") 是可见的，尽管其他元素 ("#b"、"c#") 在它上面。

请参阅以下 JS fiddle 示例和代码：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，但这会导致页面中的所有其他元素都在它之上并且实际上是不可见的。

4

3 回答 3

0

只需将#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;
}
于 2013-11-11T15:15:32.043 回答
0

尝试这个：

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

于 2013-11-11T15:15:52.137 回答
0

你想要这样的东西吗？

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;
}
于 2013-11-11T15:20:31.370 回答