当将header的position设置为fixed以后 header>container 的width:100% 就不会起作用了
这时我们需要 给header 添加 width:100% 属性
这时我们的container长度就回正常
<header id="header">
<div class="container">
<div class="row d-flex justify-content-around align-items-center">
<div>
<a href="index.html"><img src="images/logo.png" alt=""></a>
</div>
</div>
</div>
</header>
#header{
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
padding-top: 15px;
}
相对定位:
<section class="banner-area">
<div class="overlay overlay-bg"></div>
<div class="container">
<div class="row d-flex justify-content-center align-items-center">
<div class="about-content">
<h1 class="text-white">About me</h1>
<p class="text-white mt-1">
<a href="">Home</a>
<span class="lnr lnr-arrow-right"></span>
<a href="">About US</a>
</p>
</div>
</div>
</div>
</section>
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay-bg{
background-image: -webkit-linear-gradient(0deg, #bfacff 0%, #795fff 100%);
opacity: 0.9;
}
.banner-area{
position: relative;
background: url(../images/header-bg.jpg) center;
background-size: cover;
.about-content{
text-align: center;
padding: 140px 0;
color: $white;
z-index: 1;
h1{
font-size: 48px;
font-weight: 300;
}
a{
color: $white;
}
}
}