footer部分不用绝对就把content-item区域下面盖了不是已经清出浮动了吗，绝对定位会让脱离文档下面的会把上面的盖掉对吧

<!doctype html>

<head>

<style>

padding:0;

margin:0;

border:0;

}

/*此处填写css样式*/

body{

margin:0;

padding:0;

}

.wrap{

width:1000px;

margin:0 auto;

position:relative;

}

.top{

background:#f5f5f5;

color:#868686;

font-size:13px;

line-height: 50px;;

height:50px;

}

margin:0;

padding:0;

display:inline-block;

}

.call{

background:url(http://img1.sycdn.imooc.com/climg//58c61b9d0001e02d00170017.png)no-repeat center left;

float:left;

padding-left: 30px;;

}

.top .welcome{

float:right;

}

.top a{

color:#2da5e1;

}

text-decoration: none;

}

.header{

height:92px;

}

.clearfix{

content:"";

height:0;

zoom: 1;

display:block;

clear: both;

}

.logo{

display:block;

width:402px;

height:72px;

padding:9px 0;

}

.logo img{

width:100%;

height:100%;

}

.search{

position:absolute;

background:url(http://img1.sycdn.imooc.com/climg//58c61b7e00012b9303260038.jpg) no-repeat center;

width:326px;

height:50px;

right:0px;

top:29px;

}

.search .ui-search-select{

display: inline-block;

position:absolute;

left:12px;

top:12px;

color:#fff;

}

.search .ui-search-select-list a{

display:block;

color:#A5a2a2;

padding-top: 5px;;

}

.search .ui-search-select-list a:hover{

background-color:#ebeef5;

}

.search .ui-search-select-list {

display:none;

position:absolute;

left:0px;

top:44px;

background:#fff;

width:60px;

text-align: center;

height:80px;

box-shadow: 3px 3px 5px rgba(0,0,0,0.2);

}

.search .ui-search-input{

display: block;

position: absolute;

top:22px;

left:115px;

}

.nav{

background:#60bff2;

height:36px;

}

.nav .link{

line-height: 36px;

padding-right: 30px;

color:#fff;

}

.nav .right{

padding-left:260px ;

}

.content-nav .logo1 img{

width:100px;

height:40px;

position: absolute;

top:20px;

left:50px;

z-index:0;

}

.content-nav .link1{

position: absolute;

left:65px;

top:20px;

display:block;

z-index:1;

color:#fff;

line-height: 40px;

}

.link-wrap{

height:90px;

width:1000px;

border: 1px solid rgb(241, 234, 234);

border-top:3px solid #60bff2;

position: absolute;

top:60px;

left:50px;

}

.content-nav .link{

display:inline-block;

width:100px;

padding-right:12px;

font-size:15px;

color: #666;

}

.content-nav .link2{

position: absolute;

top:30px;

right:50px;

}

.content-nav .link-wrap .wrap1{

margin:7px 0 0 15px;

width:700px;

}

.content-tab{

position: absolute;

left:159px;

top:357px;

height:270px;

width:300px;

border: 1px #dddddd solid;

}

.content-tab .list-item{

width:200px;

height: 30px;

position: relative;

top:10px;

}

.content-tab i{

position: absolute;

top:5px;

left:8px;

width:20px;

height:25px;

display: inline-block;

background: url(http://img1.sycdn.imooc.com/climg//58c61b610001c58300440638.jpg) 0 0 no-repeat ;

}

.content-tab a{

position: absolute;

top:5px;

left:28px;

color: #666;

}

.content-tab a:after{

content:'>';

font-size:20px;

position: absolute;

left:238px;

top:-5;

}

.content-tab .i1{

background-position: 0px -21px;

}

.content-tab .i2{

background-position: 0px -43px;

}.content-tab .i3{

background-position: 0px -65px;

}

.content-tab .i4{

background-position: 0px -87px;

}

.content-tab .i5{

background-position: 0px -109px;

}

.content-tab .i6{

background-position: 0px -131px;

}

.content-tab .i7{

background-position: 0px -153px;

}

.content-item{

width:700px;

border:1px #dddddd solid;

position:relative;

left:480px;

right:20px;

top:180px;

}

.lista{

display:block;

padding: 30px 0 10px 20px;

}

.content-item .content-list-item{

padding-bottom: 20px;

width:660px;

border-top:1px #dddddd dashed;

margin: 0 auto;

}

.content-item .content-list-item a{

display:inline-block;

width:80px;

padding:20px 0 0 30px;

color:#666;

font-size:14px;

}

footer{

position: relative;

top:220px;

background: #666;

width:100%;

height:80px;

text-align: center;

}

footer p{

line-height: 80px;

font-size: 18px;

color:#868686

}

</style>

</head>

<body>

<p class="welcome">欢迎来到城市预约统一挂号平台  请

</p>

</div>

</div>

</div>

<a href="#" class="link">按医院挂号</a>

<a href="#" class="link">按科室挂号</a>

<a href="#" class="link">按疾病挂号</a>

<a href="#" class="link right">社会知名医院</a>

</div>

<a href="#"class="link">肿瘤综合科</a>

</div>

<i></i>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">心血管内科</a>

<a href="#">过敏反应科</a>

</div>

<a href="#">心血管内科</a>

<a href="#">过敏反应科</a>

</div>

<a href="#">心血管内科</a>

<a href="#">过敏反应科</a>

</div>

<a href="#">心血管内科</a>

<a href="#">过敏反应科</a>

</div>

</footer>

//此处填写jQuery代码

$(function(){

$('.ui-search-select').on('click',function(){

$('.ui-search-select-list').show();

return false;

});

//为什么这里没有执行

$('body').on('cilck',function(){

$('.ui-search-select-list').hide();

});

$('.ui-search-select-list a ').on('cilck',function(){

$('.ui-search-select').text($(this).text());

$('.ui-search-select-list').hide();

return false;

})

</script>

</body>

</html>

慕仰8079247 2022-01-08

源自：实战：挂号平台首页 5-11 编程练习

收起

1回答

好帮手慕慕子 2022-01-09 11:17:27

同学你好，footer和content-item设置的都是相对定位，而不是题目描述中的绝对定位。

针对同学的问题解答如下：

1、与浮动无关，是定位导致的，因为footer本来就是紧挨着content-item内容后面显示的，由于content-item内容设置了相对定位后，原本占据的页面位置还存在，但是content-item通过top属性调整了它的位置，导致footer不设置相对定位的话，还是会紧挨着content-item原来占据的位置显示，被content-item覆盖。

可以去掉content-item的top属性值后测试下，footer确实在content-item后面显示的，示例：

同学粘贴的代码中，给footer设置相对定位就是一种解决该问题的方式。

2、“绝对定位会让脱离文档下面的会把上面的盖掉对吧” 不太理解同学这句话表达的意思，可以结合老师第一条解释，以及之前学习的定位相关知识理解下，如果还有问题，可以再详细描述下，便于帮助同学准确的定位与解决问题。

另外，关于代码中的存在问题，在同学另一个提问下已经给出了解决方案，可以参考下：

https://class.imooc.com/course/qadetail/314633

祝学习愉快~

收起回答

提问者慕仰8079247 #1

哪如果不设置相对定位还有没有解决方法，相对定位和绝对定位用多了有没有影响

2022-01-09 11:47:16
好帮手慕慕子回复提问者慕仰8079247 #2

同学你好，对于你的问题解答如下：
1、也可以通过设置margin-top属性解决这个问题，示例：
2、一般是不会有影响的
祝学习愉快~

2022-01-09 13:09:36