引导轮播箭头不会响应 z 索引更改

Question

我已经从原始布局中修改了我的引导箭头图标的html，以便字形图标是上一个和下一个的超链接。我遇到的问题是，当旋转木马是在一个小屏幕上的元素被追加在旋转木马内部(见代码，追加是用d3完成)似乎与左字形重叠，它不能被用来去上一个幻灯片。这种情况不会发生在大屏幕上。(注意，它们最初是隐藏的，但我在构建页面时显示它们)尽管我将上一键和下一键绑定到键盘箭头上，但这仍然会导致一些用户感到困惑。我试过确保左箭头在CSS中被分配一个位置，然后给出页面上最高的z值，但它仍然不起作用。有没有别的方法可以让它工作?

<div class="carousel-wrapper">
    <div id="defect-carousel" class="carousel slide" data-interval="false">
        <!-- Controls -->
        <div class="left carousel-control" style="display:none;">
        <a href="#defect-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
         </div>
        <!-- Wrapper for slides -->
        <div class="container">
            <div class="carousel-inner"></div>
        </div>
        <div class="right carousel-control" style="display:none;">
        <a href="#defect-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
    </div>
</div>

Answer 1

我可以通过将较高的z-index分配给左侧类而不是carousel控件或glyphicon类来解决这个问题。