css3 绝对定位后需要对绝对定位的div元素设置 width和height

最新推荐文章于 2024-12-16 10:27:19 发布

原创最新推荐文章于 2024-12-16 10:27:19 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#position #fixed #absolute

CSS3 专栏收录该内容

9 篇文章

订阅专栏

本文详细解析了当使用CSS的fixed定位时，如何确保header宽度正确显示，并介绍了相对定位在页面设计中的应用。

当将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;
        }
    }
}