position:fixed; top: 0; right: 0; bottom: 0; left: 0;是什么意思？

Question

在ratchet.css中看到body选择器中有

position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;

没看懂这是什么意思。
1、不是说top和bottom只能设一个值吗？
2、不是说top是用在绝对定位或者相对定位中吗？为什么fixed也可以？
3、不是说定位是基于有position的父元素吗，但我看html标签没有写position啊？
4、这段css能实现什么效果？

请大家指教。

Answer 1

简单的理解就是会导致css溢出从而达到居中的目的，具体原题可以看一下 @Humphry 大大的文章：http://segmentfault.com/blog/humphry/1190000000381042#articleHeader6

Answer 2

简单点说，高宽和可视区域，一般做遮盖层的时候用。如果position是absolute的时候，就和父元素大小一样。另外如果再加上margin：auto；并指定width和height可以达到垂直和水平都居中。

Answer 3

这样写的目的是让这个层充满整个屏幕，在写弹窗效果时经常会这样用，但这个题目中是给body设置的，目的是使body充满屏幕，不让body滚动。

1. top和bottom可以同时设置的
2. fixed和absolute是近亲，是相对于浏览器的viewport定位，往页面的右下角看，那个二维码就是用的fixed。建议去了解一下。
3. 还是去了解一下position吧。
4. 效果是让这个层充满整个屏幕。

类似的posotion的值还有sticky

动下手，直接去百度就够了，都不用去Google的。