开发者社区> 问答> 正文

问 div设置了固定定位后下面的div就顶上去了要怎么解决呢?

screenshot

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<style type="text/css">
ul{
list-style:none;
padding:0px;
}
html{
font-size:0.625em;
}
body,ul{
margin:0;
font-family:"宋体";
}
h1,h2{
font-weight:normal;
}
em{
font-style:normal;
}
img{
border:none;
}
h2{
margin:0px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a,button{
cursor:pointer;
}

wrap,#header,#banner{

width:100%;
}
p,h1,h2,#wrap{
margin:0;
}

wrap{

position:relative;
}

header{

background:#281121 url(../images/header_bg.gif) repeat-x;
background-size:100% 100%;
min-height:163px;
position:fixed;
top:0;
left:0;
}

header_top,#header_bottom{

width:1200px;
margin:0 auto;
}

header #header_top{

heigth:24px;
line-height:24px;
}

header #header_top p,#header #header_top h1 a{

font-size:1.2rem;
}

header #header_top p,#header #header_top h1 a,#header #header_bottom span,#header #header_bottom em,#header #header_bottom ul li a{

color:#fff;
}

header #header_top p,#header #header_bottom ul li{

float:left;
}

header #header_top p{

width:200px;
margin-left:30px;
}

header #header_top h1{

width:245px;
float:right;
font-size:0px;
}

header #header_top h1 a{

margin-right:15px;
}

header #header_bottom{

background:url(../images/logo.gif) no-repeat 50px 35px; 
height:125px;
padding-top:10px;
}

header #header_bottom span,#header #header_bottom em,#header #header_bottom ul li a{

display:block;
}

header #header_bottom span,#header #header_bottom em{

text-align:right;
height:30px;
line-height:30px;
margin-right:15px;
}

header #header_bottom span{

width:1145px;
margin-right:40px;
font-size:1.4rem;
}

header #header_bottom em{

width:100%;
font-size:2.6rem;
font-family:Arial, Helvetica, sans-serif;
background:url(../images/phone_icon.gif) no-repeat 990px 5px;
}

header #header_bottom ul{

width:725px;
margin:6px auto 0;
}

header #header_bottom ul li,#header #header_bottom ul li a{

height:49px;
}

header #header_bottom ul li{

width:145px;
font-size:2.4rem;
font-family:"微软雅黑";
text-align:center;
padding-top:10px;
}

header #header_bottom ul li a:hover,#header #header_bottom ul li a.first{

text-decoration:none;
background:url(../images/red_line.gif) no-repeat center 44px;
}
.line{
background:url(../images/line.gif) no-repeat left bottom;
}

banner{

width:100%;
height:500px;
}
.clearfix:after{
content:"200B";
visibility:hidden;
display:block;
height:0;
clear:both;
}</style>
</head>

<body>
<!--包裹层-->
<div id="wrap">
<!--头部--> 
<div id="header">
<div id="header_top" class="clearfix">
<p>您好!欢迎光临magica包装有限公司</p>
<h1>
+ 网站地图
+ 收藏本站
+ 加盟合作
</h1>
</div>
<div id="header_bottom">
<span>全国服务热线</span>
0771-7771888
<ul class="clearfix">
<li>首  页</li>
<li class="line">关于我们</li>
<li class="line">新闻中心</li>
<li class="line">产品中心</li>
<li class="line">联系我们</li>
</ul>
</div>
</div>
<div id="banner"">
<img class="banner" src="images/banner1.jpg" width="100%" height="351" alt="banner1" class="clearfix"> 
</div>
</div>
</body>
</html>

展开
收起
杨冬芳 2016-06-22 16:17:25 4492 0
1 条回答
写回答
取消 提交回答
  • IT从业

    假设你固定定位的元素高度:100px; 那么被“顶上去的元素”加一个
    padding-top:100px; 或者 margin-top:100px;,希望能帮到你,看你提问的格式还不会用markdown吧?学习下markdown吧,不然你提问中的代码看着乱。后期写博客也可以用markdown写。好的习惯很重要。

    2019-07-17 19:45:45
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载