css中的定位

时间:2021-04-06 19:14:03

上一篇博客,我大概介绍了下浮动的使用及行为。其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当。

一、定位分类:

a、静态定位  position:static;    :元素按照正常的文档流顺序出现,位置等不产生任何改变(文档流的默认属性)。

b、相对定位  position:relative;:元素盒会产生移动,并且它在文档流中的原始空间会保留下来。

c、绝对定位  position:absolute;:元素从文档流中脱离出来,相对于容器块产生移动,原始空间不会被保留,周边元素将会占据它原来的空间。

d、固定定位  position:fixed;:元素从文档流中脱离出来,但是他们是相对于浏览器(视口)产生的位置的改变。目前有些浏览器不支持该种定位方式。

注:对于被设置为静态或相对定位的非根元素,容器块是它最近的块级元素、表格单元的内容区的边缘。

  对绝对定位的非根元素,容器块是它最近的不是静态定位的祖先元素(即它的父级元素必须为position:absolute;或者position:relative;或者position:fixed;)

二、position  的属性:

当一个元素的position 定位类型一旦被确定后,它有四个偏移属性:top  right  bottom left  (四个属性的值可以设置为:长度、百分比或者auto;)

a、相对定位:position:relative;

(top right bottom left )相对于它们在文档流中的初使位置进行定位,没有设置偏移属性的,默认值设为auto;

在文档流中所占据的原始空间被保留;

可能会覆盖其它元素;

当设置为相对定位时,使层位置产生偏移,但并不影响文本流中接下来其它层的位置;

当设置为相对定位时,层的层叠级别高于文本流的级别(即优先顺序是越靠近越产生影响);

当两个元素设置为相对定位时,同等级别下会按照文本流的顺序层叠显示。

.a {position:relative;top:100px;left:100px;}

b、绝对定位:position:absolute;

(top right bottom left )相对于容器块边缘(包括margin值)进行定位,没有设置偏移属性的,默认值设为auto;

在文档流中占据的原始空间不被保留;

当设置为绝对定位时,该层将从文档流中脱离,以该层所在的容器块的坐标原点为参考进行偏移,不会对其它元素产生任何影响;

注意:当容器块没有设置position属性或者position属性为static时候,将以body或html的坐标原点为参考。

.b {position:absolute;top:100px;left:100px;}

注意:建议文档流中慎用position属性,尽量使用float属性来对文档流相关元素进行定位!!!