Question

父容器加上：position：relative；子容器加上：position：absolute；bottom：0；left：0；right：0；

这句话是什么意思呢？小弟再看这个的时候定位position:relative与absolute很疑惑，有人能给我解释一下吗？

Answer 1

position:absolute;
这个顾名思义是绝对布局，在元素中设置之后，该元素会脱离文档流，它并不是像楼下说的相对于浏览器进行定位，而是一层一层向上寻找父元素，直到寻找到第一个position不为static的祖先元素，它相对于这个祖先元素进行定位。所以当你的父元素position:relative时，该子元素是相对于你的父元素进行定位。如果任何一个祖先元素都没有设置position:relative，寻找到最外层的顶级元素html后自然不会继续寻找，所以这时才是相对于浏览器进行定位。
position:relative
顾名思义相对布局，和absolute的区别就在于设置后元素并不会脱离文档流，所以经常用来套在设置了绝对布局的元素之外，再正常设置这个元素的位置，布局就会很整齐。它也不像楼下说的是什么相对于父元素进行定位。。它是相对于自身的位置进行定位，求不要误导人好嘛= =
还有position:fixed什么的，就是固定布局，设置之后它不会随着你的滚动条或者滑动事件进行移动，经常被用作导航栏或者webview的toast。。虽然在有些iphone手机上不兼容，效果不理想。

追问

大哥能举个例子吗？他是怎么使用的？

追答

写了个小demo你自己看看吧

Answer 2

relative基于父元素，absolute基于浏览器