Question

在我的网站www.aerycs.com上，我试图使TrustBadge以响应视图（智能手机）的形式显示在固定导航栏上方。

我的导航栏固定在顶部，并在向下滚动页面时保持在那里。

trustbadge位于此元素的后面，但不会显示。如果我只是将位置设置为相对，则整个区域都会向下滚动，这是我想避免的。

由于给出了HTML结构，因此我现在只能使用自定义CSS。

我尝试使用z-index，到目前为止还没有奏效。

Trustbadge： <div id="trustbadgeXXX"></div>

CSS：

#trustbadgeXXX {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: none no-repeat scroll 0 transparent;
    font-family: arial,helvetica,sans-serif;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    line-height: normal;
    display: inline-block!important;
    left: 0;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    clear: both;
    background-color: #fff;
    text-align: left;
    overflow: hidden;
    vertical-align: bottom;
}

固定标题： <header id="page-header" class="top-bar fixed-top">

CSS：

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;

.top-bar {
    width: 100%;
    color: #fff;```

Answer 1

将CSS下方的徽章添加到您的徽章中可能会解决您的问题（z-index: 1031会在您的标头上方）。

position: fixed; 
top: 0;
z-index: 1031;

如果要使其滚动，可以使用position: absolute。

如果您不希望徽标覆盖标题，则可以使用position: sticky作为标题。

在固定的导航栏上方显示div，并使其滚动

1 个答案: