css - html中单独用绝对定位时，设置bottom的问题，求指导
本文介绍了css - html中单独用绝对定位时，设置bottom的问题，求指导的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
html中没有relative定位，只有一个absolute定位，设置bottom为0px，多出了15px的空白条，理解不了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>唯品会banner2</title>
<style>
* {
margin:0;
padding:0;
}
li {
list-style:none;
}
#box {
height:420px;
background:url("http://a.vpimg3.com/upload/flow/2017/05/15/29/14948175903179.jpg") center -15px ;
margin-top:160px;
border:1px solid red;
}
.title {
position:absolute;
width:1000px;
height:40px;
background:red;
bottom:0px;
}
</style>
</head>
<body>
<div id="box">
</div>
<div class="title">
<ul>
<li>端午节88折活动</li>
<li>居家大促</li>
<li>分享美食</li>
<li>夏季潮流</li>
<li>赫基集团</li>
</ul>
</div>
</body>
</html>问题页面：
期望的效果
解决方案
没有设置relative 就默认是相对于窗口定位 bottom:0 当然是挨着底边了 至于中间有空白条 因为你#box高度420 + .title的高度 < 窗口高度 肯定是有的
这篇关于css - html中单独用绝对定位时，设置bottom的问题，求指导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
