标签：
昨天发现的一个问题：
因为做的是移动端前端开发，使用的apicloud技术，发现普通的打开一个frame，出现一个问题，frame是可以滚动的，当然这个可以设置，但是我的内容是不确定的，所以必须要求他可以滚动，但是有个需求是将两个按钮设置到frame的底部。
我考虑过使用绝对布局，但是使用后发现不起作用，后来请教别人发现了一个从未用过但是见过的属性，就是position: fixed;width: 100%;bottom: 20px;
后来了解了他的用法知道了他是相对于body的。
常用的position的值是relative和absolute，自己也是懵懂的，后来百度也试过很多，现在谢谢自己现在的理解，以后用的多了，再补充进来。
先来个最简单的例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <title>云API</title> <link rel="stylesheet" type="text/css" href="../css/api.css" /> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" /> <style> .div1{ position: relative; height: 100px; width: 100px; background-color: #039BE5; margin-left: 80px; margin-top: 60px; } .div2{ position: absolute; width: 30px; height: 30px; background-color: darkcyan; top: 20px; left: 20px; } .div3{ position: absolute; width: 80px; height: 80px; opacity: 0.5; background-color: hotpink; top: 10px; left: 10px; }
.div4{
position: relative;
width: 80px;
height: 80px;
opacity: 0.8;
background-color: aquamarine;
top: 10px;
left: 10px;
}
</style> </head> <body> <div class="div1"> div1 <div class="div2"> div2 </div> </div> <div class="div3"> div3 </div>
<div class="div4">
我是div4
</div>
</body> </html>
解释：
以上div3 是单独的元素，他的直接父元素是body，他的绝对定位就是相对body的，
div2 的直接父元素是div1，这种情况下，只有把div1设置为relative，div2 的absolute 才会是相对于div1的，也就是说，div2会跟着div1动。
也证明了div一旦设置为absolute，他就会脱离文档流，即和普通的div不在同一个平面[我觉得可以这样理解]。所以可以覆盖别的div。
标签：
原文地址：http://www.cnblogs.com/zlj1027/p/5738223.html
