使用绝对定位后窗口缩小页面错乱
在写布局的时候，使用绝对定位后，窗口缩小后排版会乱，网上查看办法给父元素添加相对定位后，还是一样的，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业页面布局</title>
<link rel="stylesheet" href="css/css.css">
</head>
<style>
body{
padding: 0;
margin:0;
}
.head{
width: 100%;
height: 70px;
background-color: #07cbc9;
}
.head img{
padding-top: 11px;
padding-left: 30px;
float: left;
}
.head ul{
float: right;
height: 70px;
width: 700px;
margin:0;
}
.head ul li{
float:left;
padding-right:30px;
line-height: 70px;
list-style: none;
font-size: 24px;
font-weight: 500;
text-align: center;
color: #fff;
}
/*banner*/
.banner{
width: 100%;
height:600px;
position: absolute;
top:70px;
}
.banner img{
width: 100%;
height: 100%;
}
.banner .zhezhao{
width: 100%;
height:600px;
position: absolute;
background-color: #000;
top: 0;
left: 0;
opacity: 0.5;
}
.banner .biaodan{
width: 300px;
height: 300px;
position: absolute;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
.banner .biaodan input{
width: 100%;
height: 40px;
background:0;
border: 1px solid #fff;
color: #fff;
}
.banner .biaodan textarea{
width: 296px;
height: 100px;
resize: none;
background:0;
border: 1px solid #fff;
color: #fff;
}
.banner .biaodan button{
width: 100px;
height: 40px;
padding:0;
border: 0;
margin-left: 102px;
background:0;
border: 1px solid #fff;
color: #fff;
}
/*about*/
.about{
height: 700px;
width: 100%;
position: absolute;
top: 670px;
}
.about .ab{
font-size:30px;
font-weight: 600;
text-align: center;
margin-bottom: 10px;
}
.about .kuang{
width: 30px;
height: 2px;
background-color: #07cbc9;
margin:0 auto;
}
.about .abo{
width: 400px;
text-align: center;
margin:0 auto;
padding-top: 10px;
}
.about img{
width: 400px;
padding-left:100px;
}
.about .bb3{
width: 600px;
margin: 0 auto;
margin-top: 30px;
}
.about .wenzi{
width: 700px;
}
.about /*.wenzi*/ #aword{
width: 150px;
font-size: 30px;
font-weight: 600;
margin-bottom: 10px;
position: absolute;
top:160px;
left: 30%;
}
.about /*.wenzi*/ #aword1{
width: 260px;
height: 130px;
font-size: 16px;
padding:15px;
border: 1px solid #A9A2A2;
opacity: 0.5;
background-color: #fff;
position: absolute;
top:280px;
left: 30%;
}
.about /*.wenzi*/ #aword2{
width: 65px;
height: 25px;
padding:2px;
background-color: #000;
text-align: center;
font-size: 16px;
position: absolute;
top:400px;
left: 32%;
}
.about /*.wenzi */#aword2 a{
color: #fff;
text-decoration: none;
line-height: 25px;
}
.about /*.wenzi*/ .w7{
width: 200px;
height: 100px;
text-align: center;
border-right: 1px solid #07cbc9;
border-bottom: 1px solid #07cbc9;
position: absolute;
top:200px;
right: 25%;
}
.about /*.wenzi*/ .w7 .w8 {
text-align: center;
font-size: 24px;
font-weight: 900;
margin-bottom: 10px;
}
.about /*.wenzi */.w7 .w9 {
text-align: center;
margin-top: 10px;
font-weight: 600;
}
.about /*.wenzi */.w6{
width: 200px;
height: 100px;
text-align: center;
border-right: 1px solid #07cbc9;
border-bottom: 1px solid #07cbc9;
position: absolute;
top:330px;
right: 25%;
}
.about /*.wenzi */.w6 .w10 {
text-align: center;
font-size: 24px;
font-weight: 900;
margin-bottom: 10px;
}
.about /*.wenzi*/ .w6 .w11 {
text-align: center;
margin-top: 10px;
font-weight: 600;
}
</style>
<body>
<!-- 顶部 -->
<div class="head">
<img src="images/logo.png" alt="logo">
<ul>
<li>HOME</li>
<li>ABOTU</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
<!-- banner -->
<div class="banner">
<img src="images/banner3.jpg" alt="banner">
<div class="zhezhao"></div>
<div class="biaodan">
<form action="" id="bd">
<input type="text" name="yourname" value="yourname" " /><br><br>
<input type="password" name="yourpwd" value="yourname" /><br><br>
<input type="email" name="youremail" value="youremail" /><br><br>
<textarea name="" id="wenben" cols="30" rows="10"></textarea> <br> <br>
<button type="submit" form="bd">GO</button>
</form>
</div>
</div>
<!-- ABOUT -->
<div class="about">
<p class="ab">ABOUT</p>
<div class="kuang"></div>
<p class="abo">"I want to appear as a good girl in everyday life and a bad girl in my own thoughts.Outwardly I want to appear as a tender and loving lady,and yet being a ble to transform ino any state of mind. "</p>
<div class="bb3">
<img src="images/bb3.jpg" alt="">
</div>
<!-- <div class="wenzi"> -->
<p id="aword">A WORD ABOUT US</p>
<div id="aword1">"I want to appear as a good girl in everyday life and a bad girl in my own thoughts.Outwardly I want to appear as a tender and loving lady, "</div>
<div id="aword2"><a href="#">GO</a></div>
<div class="w7">
<p class="w8">70000</p>
<div class="kuang"></div>
<p class="w9">students</p>
</div>
<div class="w6">
<p class="w10">600</p>
<div class="kuang"></div>
<p class="w11">Facuity</p>
</div>
</div>
<!-- </div> -->
<div class="tuwen"></div>
<div class="gallery"></div>
<div class="foot"></div>
</body>
</html>
正在回答 回答被采纳积分+1
您好，绝对定位的作用是将某一个元素脱离原来的数据流，固定到某一个位置，要保证它在窗口缩小时位置不变，前提是元素的宽高，top以及right值也是根据屏大小成比例变化的，小慕运行您的代码，主要是上面的logo格式乱了，这主要是因为head里面的img和ul有自己固定宽，缩小时，宽度不够，ul元素会被挤到下一行，而下面固定定位的元素位置不变，整个看起来就乱了。
另外，代码中大多数地方都使用绝对定位，这个布局其实是不合理的，我们只需要有目的的在需要绝对定位功能的地方使用即可，否则页面会出现很多无法预料的错误，页面也会越改越乱。请重新理一下页面布局思路，再尝试一下本题。
- 参与学习 人
- 提交作业 626 份
- 解答问题 4930 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星