CSS定位属性详解与实例.pdfVIP

CSSPosition学习

CSS定位有四个属性:

•relative

•absolute

•fixed

•static(默认)

样例

divid=父元素divid=子1

子元素1/divdivid=子2子

元素2/div/div

子1和子2是同级关系，父元素是它们的父级元素。

相对(相对定位)

相对定位是指相对于该元素原始位置的定位，并且会保留其原始位置的空间。

所谓的原始位置是指未设置relative属性时该元素的位置（即static属性时的位置）。

relative偏移是以margin的左上角为参考点的。

例如对

sub1

设置

relative

属性后，会根据

top、right、bottom、left

属性偏移，

而

sub2

的位置不变（sub1

会占住原来的位置）

CSS

位置

图

1

CSS位置图1

再对

sub2

设置

relative

属性，它也会相对于它原来的位置偏移（sub2

的位置仍然会

被占据）

CSS

位置

图

2

CSS位置图2

absolute(绝对定位)

绝对定位是根据其进行定位的父对象的内边距（padding）的左上角进行定位，基本分为以

下两种情况：

•例如对子元素

sub1

进行绝对定位，如果子元素

sub1

的父级元素