CSS中的position
属性是用来定义元素的定位方式( static / relative / fixed / absolute / sticky )。
position
属性可定义元素的定位方式,该属性有5种取值,如下:
static
relative
fixed
absolute
sticky
下面会用到,提前说一下。为了更精确的定位,left/right/top/bottom也都可以作为属性来进一步定义,但是如果想这些真正生效,就要保证
position
属性必须被先设置好了。否则就是扯淡!
HTML元素在默认情况下的定位属性的取值都是static这个值。
当position属性取值static时,left/right/top/bottom这些属性不会被支持的,设置了也白搭,static定位时不会考虑这些的。
static定位时,该元素不会有啥特殊的功效,根据页面的正常布局方式。
如下例所示:
div.static { position: static; border: 3px solid #46acb6; }
当position属性取值relative时,则意味其定位方式是相对定位,相对于普通定位(static定位的原有位置)而言,此时left/right/top/bottom属性就会生效,如下所示:
源码如下所示:
div.relative { position: relative; left: 72px; border: 3px solid #46acb6; }
当position属性取值fixed时,则意味其定位方式是相对于视窗(viewport)的绝对定位(视窗就是浏览器窗口),此时left/right/top/bottom属性就会生效,如下所示:
div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #46acb6; }
一些运营商中的黑产,还有一些以杀毒安全的名义暗地扶持流氓插件的浏览器,进行dns劫持后,在页面右下角弹出300*250px大小的垃圾广告的元素定位方式就是fixed;呵呵 ——_——|||
当元素positions属性取值为absolute时,即绝对定位。所谓绝对定位,类似fixed定位,但相对的不是视窗,而是相对于离该元素最近的已定位元素(只要不是static定位的都可以)。
案例源码如下:
div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #46acb6; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #46acb6; }
当元素positions属性取值为sticky时,则会根据滚动条的位置,来切换relative和fixed的效果。具体如何,语言描述起来还是太没力气,直接看例子吧,自己去专否沙盒试试吧!(多试试,还算挺巧妙实用的)
试着滚动页面来看看下面那个div元素的位置变化。
友情提示 IE/Edge 15以及其以前的版本是不支持该CSS属性的
惜秦皇汉武,
略输文采;
唐宗宋祖,
稍逊风骚。
一代天骄,
成吉思汗,
只识弯弓射大雕。
俱往矣,数风流人物,还看今朝。
案例源代码如下:
div.sticky { position: -webkit-sticky; position: sticky; top: 10px; padding: 5px; background-color: #eef8f8; border: 2px solid #46acb6; }
如下例所示,试试吧,把position属性活学活用吧:
左上角:
运行一下
右上角: 运行一下
左下角: 运行一下
右下角: 运行一下
正中间: 运行一下