Question

展示场景
我有两个容器div。首先是左侧，第二个是页面右侧。容器div包含圆形按钮我正在尝试使用另一个div作为桥.click()来连接左右圆形按钮。

我的要求
桥接div应位于容器div的前面，但在圆形按钮后面。

请给我一些解决方案。
等待你的帮助。

#bridge

function set_positions()
{
  var speed_down_top = $('#bomb').offset().top;
	document.getElementById('bridge').style.top = (speed_down_top)+"px";
}

set_positions();

#leftBtns, #rightBtns {
    color: white;
    background-color: rgba(0, 0, 0, 0.17);
    margin-top: 15px;
    margin-bottom: 15px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    border: solid rgba(0,0,0,0.12);
    border-width: 1px;
    z-index: 0;
}

.my_icon_bomb {
}
.my_icon {
    width: 40px;
    height: 40px;
    overflow: hidden;
    background-repeat: no-repeat;
    display: block;
    text-indent: -99999px;
    padding: 10px;
}
.round_btns {
    border: 1px solid;
    border-radius: 30px;
    background-color: rgba(0,0,0,0.35);
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
    z-index: 2;
}
#bridge {
    position: absolute;
    float: left;
    width: 92%;
    height: 60px;
    color: white;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    border: solid rgba(0,0,0,0.7);
    background-color: rgba(255,0,0,0.15);
    border-width: 1px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

Answer 1

你只需要给#bridge

指定z-index = -1

就像下面的代码一样

#bridge {
    position: absolute;
    float: left;
    width: 92%;
    height: 60px;
    color: white;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    border: solid rgba(0,0,0,0.7);
    background-color: rgba(255,0,0,0.15);
    border-width: 1px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}

它可能适合你

Answer 2

只需将position: relative;设置为round_btns，请查看下面的更新代码段

function set_positions()
{
  var speed_down_top = $('#bomb').offset().top;
	document.getElementById('bridge').style.top = (speed_down_top)+"px";
}

set_positions();

#leftBtns, #rightBtns {
    color: white;
    background-color: rgba(0, 0, 0, 0.17);
    margin-top: 15px;
    margin-bottom: 15px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    border: solid rgba(0,0,0,0.12);
    border-width: 1px;
    z-index: 0;
}

.my_icon_bomb {
}
.my_icon {
    width: 40px;
    height: 40px;
    overflow: hidden;
    background-repeat: no-repeat;
    display: block;
    text-indent: -99999px;
    padding: 10px;
}
.round_btns {
    border: 1px solid;
    border-radius: 30px;
    background-color: red;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
    z-index: 2;
    position: relative;
}
#bridge {
    position: absolute;
    float: left;
    width: 92%;
    height: 60px;
    color: white;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    border: solid rgba(0,0,0,0.7);
    background-color: rgba(255,0,0,0.15);
    border-width: 1px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="leftBtns" style="float:left;">
	<div id="bomb" class="round_btns my_icon my_icon_bomb" title="Round Button"></div>
	<div class="round_btns my_icon my_icon my_icon_play btn_start_pause" title="Round Button"></div>
</div>

<div id="rightBtns" style="float:right;">
	<div class="round_btns my_icon my_icon_bomb" title="Round Button"></div>
	<div class="round_btns my_icon my_icon my_icon_play btn_start_pause" title="Round Button"></div>
</div>

<div id="bridge">
</div>

如何设置relative，absolute和parent，child mix div的z-index？

2 个答案: