[英]z-index with overflow hidden
I'm trying to add an Arrow to the active item of list which have alot of elements so I add overflow hidden to items parent's container, and the arrow to the after of item element, but it doesn't appear because of the overflow, even I add z-index to the arrow. 我试图将箭头添加到具有很多元素的列表的活动项目中,因此我将隐藏的溢出添加到项目父项的容器中,并将箭头添加到项目元素的后面,但是由于溢出而没有出现,甚至我将z-index添加到箭头。 I don't want to add scroll, overflow hidden is needed.
我不想添加滚动,需要隐藏隐藏的溢出。
/* HTML */ / * HTML * /
<div class="row">
<div class="col-xs-2">
<ul class="list-unstyled">
<li class="active">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
</ul>
</div>
<div class="col-xs-10">
</div>
</div>
<a class="btn btn-primary" type="button">Scroll</a>
/* CSS */ / * CSS * /
.row {
background-color: #CCC;
height: 100px;
overflow: hidden;
}
.row .col-xs-2 {
background-color: #fafafa;
text-align:center;
position:relative;
}
.row ul {overflow:hidden; height:100%;position:relative;}
.row .col-xs-10 {height:100%; background-color:#aeaeae;}
.row .col-xs-2 li {position: relative;width:100%;}
.row .col-xs-2 li.active:after {
left: 120%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-color: rgba(245, 245, 245, 0);
border-left-color: #FF5500;
border-width: 20px;
margin-top: -20px;
z-index: 1;
}
If you remove your 'left: 120%' your arrow shows up just fine. 如果删除“左:120%”,则箭头显示就好了。 You will need to change the left value depending on where you want your arrow to be.
您需要根据希望箭头的位置更改左值。 But you can't use more then 100% if you use overflow-hidden, else it will be too far out and you can't scroll.
但是,如果您使用溢出隐藏功能,则不能使用超过100%的值,否则它将太远并且无法滚动。
.row .col-xs-2 li.active:after {
left: 0%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
border-color: rgba(245, 245, 245, 0);
border-left-color: #FF5500;
z-index: 1;
}
Alternativly, you could use 或者,您可以使用
.row {
background-color: #CCC;
height: 100px;
overflow-y: hidden;
}
so you can at least scroll horizontally to see your arrow. 因此您至少可以水平滚动以查看箭头。
http://fiddle.jshell.net/nct3rdhg/1/ http://fiddle.jshell.net/nct3rdhg/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.