請問如何防止position:fixed塌陷問題?

請問如何防止position:fixed塌陷問題?

如果header的div的position設定為fixed的話,content的banner區就會往上佔據header的div空間,請問如何解決?

[html]

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>主頁面</title>

    <link rel="stylesheet" href="css/index.css">

    <script src="javascript/index.js"></script>

</head>


<body onload="init()">

    <!-- 頁眉(頂部) -->

    <div class="header">

        <img src="image/logo.png" alt="">

        <div class="menu">

            <ul>

                <li>

                    <a href="###" class="menu_option" value="1">home</a>

                </li>

                <li>

                    <a href="###" class="menu_option">about</a>

                </li>

                <li>

                    <a href="#" class="menu_option">gallery</a>

                </li>

                <li>

                    <a href="###" class="menu_option">faculty</a>

                </li>

                <li>

                    <a href="###" class="menu_option">events</a>

                </li>

                <li>

                    <a href="###" class="menu_option">contact</a>

                </li>

            </ul>

        </div>

    </div>

    <!-- 內文(content) -->

    <div class="content">

        <!-- banner區 -->

        <div class="banner">

            <img src="image/banner3.jpg" alt="">

            <div class="mask"></div>

            <ul>

                <li><input type="text" class="user_info"></li>

                <li><input type="text" class="user_info"></li>

                <li><input type="text" class="user_info"></li>

                <li><textarea class="user_info" cols="30" rows="5"></textarea></li>

                <li>

                    <a href="###" class="enter_user_info">SENT MESSAGE</a>

                </li>

            </ul>

        </div>

        <!-- about區 -->

        <div class="about">

            <!-- about區上半部 -->

            <div class="about-top">

                <div class="title">

                    <h1>ABOUT</h1>

                    <div class="title_dash"></div>

                    <div class="title_intro">

                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, vel! Consequuntur officia, sequi fugiat assumenda impedit iure, ex odio magnam at illum esse, similique nemo! Voluptatibus fugiat quasi sequi accusantium.

                    </div>

                </div>

                <div class="about-top-content">

                    <div class="left">

                        <div class="left-top">

                            <p class="before">A WORD</p>

                            <p class="after"> ABOUT US</p>

                        </div>

                        <div class="left-bottom">

                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum libero amet suscipit accusantium. Fuga sit aperiam cupiditate! Quas vero assumenda maxime ipsum quibusdam modi corrupti, consequuntur, ipsa aliquam officia sit.</p>

                            <div>

                                <a href="###" class="explore">EXPLORE</a>

                            </div>

                        </div>

                    </div>

                    <div class="center">

                        <img src="image/bb3.jpg" alt="">


                    </div>

                    <div class="right">

                        <div class="right-top">

                            <div class="num">70000</div>

                            <div class="dash"></div>

                            <div class="student">Students</div>

                        </div>

                        <div class="right-bottom">

                            <div class="num">600</div>

                            <div class="dash"></div>

                            <div class="faculty">Faculty</div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- about區下半部 -->

            <div class="about-bottom">

                <ul>

                    <li><img src="image/b1.jpg" alt=""></li>

                    <li>

                        <div class="title">Library</div>

                        <div class="content"></div>

                    </li>

                    <li><img src="image/b2.jpg" alt=""></li>

                    <li>

                        <div class="title">Computer Lab</div>

                        <div class="content"></div>

                    </li>

                    <li>

                        <div class="title">Conference Hell</div>

                        <div class="content"></div>

                    </li>

                    <li><img src="image/b3.jpg" alt=""></li>

                    <li>

                        <div class="title">Play Ground</div>

                        <div class="content"></div>

                    </li>

                    <li><img src="image/b4.jpg" alt=""></li>

                </ul>

            </div>

        </div>

        <!-- Gallery區 -->

        <div class="gallery"></div>

    </div>

    <!-- 頁腳(腳區) -->

    <div class="footer"></div>

</body>


</html>

[CSS]

    * {

        /* 將內外邊距初始化以便往後的設定 */

        margin: 0px;

        padding: 0px;

        /* 指定的字體 */

        font-family: Microsoft YaHei UI;

    }

    /* 設定定位方式讓子孫定位 */

    

    .header {

        width: 100%;

        /*自定義高度防止浮動崩潰 */

        height: 60px;

        background-color: #07cbc9;

        /* position: fixed;

        z-index: 500; */

    }

    

    .header img {

        float: left;

        margin: 6px 150px;

    }

    

    .header>.menu {

        height: 100%;

        width: auto;

        float: right;

    }

    

    .header>.menu>ul {

        list-style: none;

        height: 100%;

        /* 調整邊距 */

        margin: 0px 100px 0px 0px;

    }

    

    .header>.menu>ul li {

        /* 將列表的元素從直向顯示轉換成橫向顯示 */

        float: left;

        /* 讓文字垂直與水平置中 */

        height: 100%;

        line-height: 60px;

        padding: 0px 5px 0px 5px;

    }

    

    .header>.menu>ul>li>a {

        /* 取消底線效果 */

        text-decoration: none;

        /* 將文字轉換為全大寫 */

        text-transform: uppercase;

    }

    /* 讓文字保持白色 */

    

    .header>.menu>ul>li>a:visited {

        color: #fff;

    }

    

    .header>.menu>ul>li>a:link {

        color: #fff;

    }

    /* 設定定位方式讓子孫定位 */

    

    .content {

        height: 585.78px;

        width: 100%;

    }

    

    .content>.banner {

        width: 100%;

        height: 100%;

        /* 以相對位置當作子節點(層級關係)的參照點 */

        position: relative;

    }

    

    .content>.banner>img {

        /* 讓圖片相對於瀏覽器100%顯示 */

        width: 100%;

        height: 100%;

        /* 設定層級關係 */

        position: absolute;

        z-index: 100;

    }

    /* 遮罩設定 */

    

    .content>.banner>.mask {

        /* 長寬遵從父元素 */

        height: 100%;

        width: 100%;

        /* 遮罩顏色 */

        background-color: #000;

        /* 半透明(遮罩)效果 */

        opacity: 0.4;

        /* 設定層級關係 */

        position: absolute;

        z-index: 200;

    }

    

    .content>.banner>ul {

        height: 100%;

        width: 100%;

        /* 設定層級關係 */

        position: absolute;

        z-index: 300;

        text-align: center;

        margin-top: 50px;

    }

    

    .content>.banner>ul>li {

        margin-top: 30px;

    }

    

    .content>.banner>ul .user_info,

    .enter_user_info {

        /* 將背景色取消 */

        background-color: transparent;

        border: 2px solid gray;

        color: gray;

        width: 300px;

    }

    

    .content>.banner>ul input[type="text"] {

        height: 40px;

    }

    

    .content>.banner>ul a {

        text-decoration: none;

        padding: 8px;

    }

    

    .content>.about>.about-top {

        position: relative;

        width: 100%;

        height: 800px;

        /* background-color: peachpuff; */

    }

    

    .content>.about>.about-top>.title {

        width: 500px;

        padding-top: 50px;

        margin: 0px auto;

    }

    

    .content>.about>.about-top>.title>.title_dash {

        margin: 10px auto 0px auto;

        width: 40px;

        height: 1px;

        border-bottom: 2px solid #07cbc9;

    }

    

    .content>.about>.about-top>.title>h1 {

        font-size: 50px;

        color: #000;

        text-align: center;

    }

    

    .content>.about>.about-top>.title>.title_intro {

        padding-top: 20px;

        text-align: center;

    }

    

    .content>.about>.about-top>.about-top-content {

        height: 524.28px;

        width: 1200px;

        margin: 50px auto 0px auto;

    }

    

    .content>.about>.about-top>.about-top-content * {

        float: left;

    }

    

    .content>.about>.about-top>.about-top-content>.left,

    .right {

        width: 250px;

        height: 435px;

    }

    

    .content>.about>.about-top>.about-top-content>.right>.right-top {

        width: 200px;

        height: 150px;

        border: 2px solid #07cbc9;

        margin-left: 20px;

    }

    

    .content>.about>.about-top>.about-top-content>.right>.right-top>.num {

        width: 180px;

        height: 80px;

        /* background-color: red; */

        line-height: 80px;

        text-align: center;

        font-size: 30px;

        margin-left: 8px;

    }

    

    .content>.about>.about-top>.about-top-content>.right>.right-top>.dash {

        width: 40px;

        height: 10px;

        margin-left: 80px;

        border-top: 3px solid #07cbc9;

    }

    

    .content>.about>.about-top>.about-top-content>.right>.right-top>.student {

        width: 180px;

        height: 40px;

        /* background-color: brown; */

        line-height: 40px;

        text-align: center;

        font-size: 18px;

        margin-left: 8px;

    }

    

    .content>.about>.about-top>.about-top-content>.right>.right-bottom {

        width: 200px;

        height: 150px;

        border: 2px solid #07cbc9;

        margin-left: 20px;

        margin-top: 10px;

    }

    

    .content>.about>.about-top>.about-top-content>.right>.right-bottom>.num {

        width: 180px;

        height: 80px;

        /* background-color: red; */

        line-height: 80px;

        text-align: center;

        font-size: 30px;

        margin-left: 8px;

    }

    

    .content>.about>.about-top>.about-top-content>.right>.right-bottom>.dash {

        width: 40px;

        height: 10px;

        margin-left: 80px;

        border-top: 3px solid #07cbc9;

    }

    

    .content>.about>.about-top>.about-top-content>.right>.right-bottom>.faculty {

        width: 180px;

        height: 40px;

        /* background-color: brown; */

        line-height: 40px;

        text-align: center;

        font-size: 18px;

        margin-left: 10px;

    }

    

    .content>.about>.about-top>.about-top-content>.left>.left-top {

        width: 100%;

        height: 120px;

        /* background: pink; */

        font-size: 40px;

    }

    

    .content>.about>.about-top>.about-top-content>.left>.left-top .before {

        padding: 35px;

        line-height: 0px;

    }

    

    .content>.about>.about-top>.about-top-content>.left>.left-top .after {

        padding: 15px;

        line-height: 15px;

    }

    

    .content>.about>.about-top>.about-top-content>.left>.left-bottom {

        width: 100%;

        height: 235px;

        background: rgba(255, 255, 255, 0.4);

        border: 1px solid gray;

        padding: 20px;

    }

    

    .content>.about>.about-top>.about-top-content>.left>.left-bottom p {}

    

    .content>.about>.about-top>.about-top-content>.left>.left-bottom div {

        border: 1px solid #000;

        margin: 10px;

    }

    

    .content>.about>.about-top>.about-top-content>.left>.left-bottom div a {

        width: 100px;

        height: 40px;

        text-decoration: none;

        background-color: #000;

        color: #fff;

        line-height: 40px;

        text-align: center;

    }

    

    .content>.about>.about-top>.about-top-content>.left>.left-bottom div a:visited {

        color: #fff;

    }

    

    .content>.about>.about-bottom ul li {

        width: 396px;

        height: 396px;

        float: left;

    }


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好, 因为这里给banner设置了一个margin-top上外边距, header设置了固定定位, 所以这时header也会随之有60px的上外边距,此时给header设置一个top,让header距离页面顶部的上边距为0,就可以解决此问题

如下

http://img1.sycdn.imooc.com//climg/5f51e02c09134c5e08550717.jpg

祝学习愉快

阿寶1118 提问者 2020-09-04 11:43:44

問題已解決,但想問技術與邏輯層面的問題。
老師,請問在header上手動加上top為0px的用意是什麼呢?

好帮手慕阿园 2020-09-04 10:50:22

同学你好,可以给banner设置一个margin-top为60px;(header的高度),再给header设置top为0px;代码如下

http://img1.sycdn.imooc.com//climg/5f51ab000901285a06670880.jpg

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师