Question

我试图将箭头添加到列表的活动项目中，其中包含很多元素，因此我将隐藏的疏忽添加到项目父容器中，并将箭头添加到项目元素之后，但它因为溢出而不会出现，即使我在箭头上添加z-index也是如此。我不想添加滚动，需要隐藏溢出。

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

.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;
}

这是fiddle

上的代码

Answer 1

如果你删除'left：120％'，你的箭头会显示正常。您需要根据箭头的位置更改左侧值。但是如果你使用溢出隐藏你不能使用超过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;
}

另外，您可以使用

.row {
    background-color: #CCC;
    height: 100px;
    overflow-y: hidden;
}

因此您至少可以水平滚动以查看箭头。

http://fiddle.jshell.net/nct3rdhg/1/

z-index隐藏溢出

1 个答案: