position:absolute绝对定位引起的遮挡求解决

2016-06-15 04:32:20 1.1万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例通过合理运用 position 属性及其值，你可以构建出既美观又实用的页面布局。关键是理解每种定位方式的特性，并根据实际需求灵活组合使用。阅读详情

三个层，div分别为
.HEAD
.MAIN
.FOOT

三个DIV层定位都是默认的。求怎么样让这个TAB下的内容不遮挡住FOOT层，小弟愚钝。求大神解决。能解决的直接发微信红包。小意思，但是心意绝对在！
QQ:64756341

其中，main里做了个选项卡TAB切换，tab切换的层其中有个层定位为，position:absolute 导致遮挡住了最下面的.FOOT层。
TAB切换的完整代码为
<style type="text/css">

.goodstabs {
width: 100%;
height:100%;
float: none;
list-style: none;
margin: 0 0 10px;
text-align: left;
}
.goodstabs li {
float: left;
display: block;
}
.goodstabs input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.goodstabs label {
display: block;
padding: 14px 21px;
border-radius: 2px 2px 0 0;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.goodstabs label:hover {
background: #d4eee1;
}
.goodstabs .tab-content {
z-index: 2;
display: none;
width: 100%;
font-size: 17px;
line-height: 25px;
padding: 25px;
position: absolute;
top: 55px;
left: 0;
background: #fff;
border-top: 1px solid #EBEBEB;
}
.goodstabs [id^="tab"]:checked + label {
top: 0;
padding-top: 17px;
background: url(/images/product-tab-bg.jpg)repeat-x;
color:#FFFFFF;
}
.goodstabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}
</style>

<ul class="goodstabs">
<li>
<input type="radio" name="goodstabs" id="tab1" checked />
<label for="tab1">商品详情</label>
<div id="tab-content1" class="tab-content">
<p>{$goods.goods_desc}</p>
</div>
</li>

<li>
<input type="radio" name="goodstabs" id="tab2" />
<label for="tab2">猜您喜欢</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>

<li>
<input type="radio" name="goodstabs" id="tab3" />
<label for="tab3">客户评价</label>
<div id="tab-content3" class="tab-content">
<p>选项卡内容 3</p>
</div>
</li>

<li>
<input type="radio" name="goodstabs" id="tab4" />
<label for="tab4">成交记录</label>
<div id="tab-content4" class="tab-content">
<p>选项卡内容 444</p>
</div>
</li>

</ul>

...全文