本文只对css新手普及基本知识,高手飘过。
另,本文只说明弹出层如何固定居中在屏幕正中,并且随滚动条移动始终居中。 弹出、关闭事件简单,请自行解决。
下面开始正文,请先看图,如何让一个宽度 400px的弹出窗口居中,这次首先要用到一个很基础的常识
left ,top,width,height等的标示方法,可以是
auto | 默认值。浏览器可计算出实际的宽度。 |
length | 使用 px、cm 等单位定义宽度。 |
% | 定义基于包含块(父元素)宽度的百分比宽度。 |
inherit | 规定应该从父元素继承 width 属性的值。 |
假设 body的宽度是980px , 那么我们定义一个弹出层div 宽度是400px,高度是200px,因为我们需要他的位置是固定不变的,所以位置定义为 position:fixed;
然后定义该DIV的位置, 我们把top left 两个都设为 50% style=“top:50%;left:50%”那么目前这个div的位置就是图一所示的位置
我们可以清楚的看到,相对于我们要的结果,明显的弹出层div偏下,偏右,剩下的我们只要将位置重新设定他的外边距
需要偏移的量是多少呢? 图二可以看到,其实只是div宽高的一半,那么 只需要在style中加上margin-left:-200px;margin-top:-100px;
综上,我们可以得出完成之后的css 样式
style { width:400px;height:200px;margin-left:-200px;margin-top:-100px;position:fixed;left:50%;top:50%;z-index:999;_position:absolute">
按照这个思路我们也可以写出不需要js就可以实现出来的body右侧经常会用到的“联系我们”,或者”帮助“的固定滚动条
相对于图二,我们只需要更改下边距即可实现。 body的宽度是980 我们要使”联系我们“在body右侧,并且距离body有10px的距离 ,就需要向右偏移body的一半宽度,再加10px 也就是 500px
如图三:
有了思路,在屏幕中的任何位置都没有任何问题