html - 将我的 CSS 与内置的 Bootstrap CSS 冲突

Question

我在我们的网站上添加了自己的字幕和相关的 css，但是当我将字幕位置固定在顶部栏时，它会扰乱我的标题 CSS

网站网址:https://timesandtrendsacademy.com/ .当我试图将顶部栏设为粘性时，它会影响我的标题 css 代码并且无法正确显示。

#top-bar{

background-color:#ef4d3b !important;
font-family: roboto,sans-serif !important;
position:fixed !important;
width:100%;
}
#top-bar p{
font-size: 16px;
color:#fff;
text-align:center;
vertical-align: middle;
padding-top:2px;
}
.btn-primary{
background-color:#000;
color:#fff;
border: 1px solid #fff;
}

<div id="top-bar">
                <p>
                	<marquee onmouseover="this.stop();" onmouseout="this.start();">
                		<span>TTA's B.Sc In Fashion Designing Course Is Now Affiliated with Savitribai Phule Pune University</span>
                		<span><a href="http://www.ttafashioncollege.com/" class="btn btn-primary" role="button" target="_blank">Apply Now</a></span>
                	</marquee>
                </p>

</div>

为避免与css冲突，什么是完整干净的代码。

Answer 1

我认为最简单的解决方案是这样的:

#top-bar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 34px;
    z-index: 2;
}

body {
    margin-top: 34px;
}

这应该使#top-bar 出现在顶部，所有其他内容都被#top-bar 的高度向下推。也不要忘记 z-index: 2 因为你不希望其他内容覆盖你的#top-bar