Question

我正在显示我的mvc项目中的顶部链接。布局：

<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>

的CSS：

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}

JS：

$(window).scroll(function () {
                if ($(this).scrollTop() > 50) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });
            // scroll body to 0px on click
            $('#back-to-top').click(function () {
                $('#back-to-top').tooltip('hide');
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });

            $('#back-to-top').tooltip('show');

此按钮/链接正常运行。但在某些页面上，它隐藏在正文内容/表格下。在某些页面上它正确显示（在文本前面）。我想在所有页面上的文本前面显示此链接。请帮我解决这个问题。

Answer 1

只需为该元素设置z-index：

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;

    z-index: 9999;
}

Answer 2

我找到了解决方案。我刚刚添加了z-index：99999;到css。它工作正常。

Answer 3

与while($row = $result->**fecth**_object())

一起使用

z-index

返回顶部链接隐藏在文本下

3 个答案: