請問如何防止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;
}
正在回答
同学你好, 因为这里给banner设置了一个margin-top上外边距, header设置了固定定位, 所以这时header也会随之有60px的上外边距,此时给header设置一个top,让header距离页面顶部的上边距为0,就可以解决此问题
如下
祝学习愉快
- 参与学习 人
- 提交作业 9393 份
- 解答问题 16556 个
综合就业常年第一,编程排行常年霸榜,无需脱产即可学习,北上广深月薪过万 无论你是未就业的学生还是想转行的在职人员,不需要基础,只要你有梦想,想高薪
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星