about區左側div覆蓋圖片問題

about區左側div覆蓋圖片問題

請問如何讓左側的文字div在中間圖片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"></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: relative;

    }

    

    .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;

    }


正在回答

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

3回答

同学你好,相对定位是相对于原来位置移动,这里没有设置top,left等属性,也就是在当前位置没有移动。

如果使用绝对定位absolute,会相对于最近的设置了相对或绝对定位的父元素进行定位。离left-bottom最近的定位元素是about-top,如果使用绝对定位,会相对于about-top进行定位,about-top宽度为100%,也就是浏览器默认宽度。left-bottom的宽度设置100%,会根据about-top显示为浏览器宽度。另外由于left-bottom是在about-top-content的元素中,会居中显示,造成left-bottom右移,宽度是浏览器宽度,造成可以左右移动页面。使用绝对定位效果如下:

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

z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。关于z-index的值给99,这里是习惯性给一个较大的数。

祝:学习愉快~

阿寶1118 提问者 2020-09-04 11:41:12

老師,那再請問,為什麼此處是使用相對定位,且z-index是給99呢?

好帮手慕阿满 2020-09-04 10:53:24

同学你好,可以设置定位,然后使用z-index使其堆叠在div上边。如:

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

祝:学习愉快~


  • 提问者 阿寶1118 #1
    老師請問,為什麼此處要使用相對定位,且z-index是給99呢?
    2020-09-04 11:40:07
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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