Question

这可能是一个非常基本的问题，但我的Bootstrap模板上的标语与所有其他内容重叠。

例如，如果我向下滚动页面并且我的徽标通过文本，则文本将位于徽标的顶部。导航栏也是这种情况，当我向下滚动页面时，文本将覆盖在导航栏上，并且在较小的屏幕尺寸上尤其明显。

我尝试调整z-index，但是当我定位元素时文本完全消失了。以下是一些代码片段（事先感谢任何帮助）：

HTML (h1 headers are the issue)
    <span id="index.html">
        <section class="creative-banner">
            <div  data-nav-dots="false" data-nav-arrow="true" data-items="1" data-sm-items="1" data-lg-items="1" data-md-items="1" data-autoplay="true">
                <div class="item"> <img class="img-fluid" src="images/home.jpg" alt="person sittng on bench">
                    <div class="creative-text text-left">
                        <h1 class="iq-font-white iq-mt-10"><strong>Go Ahead, Share Your Idea <br>With The World</br></strong></h1> <!--Original class = "text-uppercase iq-font-white display-3"-->
                        <h1 class="iq-font-white iq-mt-10"><strong>We'll Help</strong></h1>
                    </div>
                </div>

CSS：。

owl-item.active .creative-text.text-left h1 { animation: 1s .2s fadeInRight both; }

Answer 1

审核了此问题并确认原因是z-index。在CSS中，文本的索引设置为999，标题为9.我将标题的z-index编辑为1000，这纠正了问题。

标头的CSS：标题{position：fixed;左：0;顶部：0; display：inline-block;宽度：100％; z-index：1000;填充：25px 100px 0;背景：#fff;过渡：全部0.5秒轻松进出;过渡：全部0.5秒轻松进出; -moz-transition：全部0.5s轻松进出; -ms-transition：全部0.5s轻松进出; -o-transition：全部0.5s轻松进入; -webkit-transition：全部0.5s轻松进出; }

CSS for Text： .creative-text {position：absolute;最高：55％;左：50％; -webkit-transform：translate3d（-50％， - 50％，0）; transform：translate3d（-50％， - 50％，0）;填充：100px; z-index：999; display：inline-block;宽度：100％; }

如何防止标语文本重叠所有其他内容？

1 个答案: