《Web网站设计与开发教程》课件第3章.ppt

在父层position属性为默认值时，上、下、左、右的左边原点以body的坐标原点为起始点。

当元素被设为相对定位或绝对定位后，将自动产生层叠，其层叠级别高于文本流的级别。有时，在实际应用中，既希望定位元素有绝对定位的特征，又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时，绝对定位的元素能保证相对于这个坐标原点的相对位置，即需要该绝对定位随着网页的移动而移动。要实现这种效果，就要将这个绝对定位的父级设置为相对定位或者绝对定位。此时，绝对定位的坐标就会以父级为坐标起始点。固定定位，即position：fixed，就是把一些特殊的效果固定在浏览器的视框位置。例如，让一个元素随着页面的滚动而不断改变自己的位置。目前高级浏览器都可以正确地解析这个CSS属性。3.5.3CSS的定位方式

在CSS中对元素的定位，可以通过position属性设置。

position：static|relative|absolute|fixed

●static参数：是所有元素定位的默认值，无特殊定位，对象遵循HTML定位规则，不能通过z-index进行层次分级。

●relative参数：相对定位，对象不可层叠，但可以通过left、right、bottom、top等属性设置在正常文档流中偏移位置，并可以通过z-index进行层次分级。●absolute参数：绝对定位，脱离文档流，并通过left、right、bottom、top等属性进行定位。选取其最近的父级定位元素，当父级元素的position为static时，该元素将以body坐标原点进行定位，并可以通过z-index进行层次分级。

●fixed参数：固定定位，该参数固定的对象是可视窗口，而并非body或父级元素，可通过z-index进行层次分级。

相对定位是一个十分容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上，然后通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。下例将top设置为20?px，框将在原位置顶部下面20?px的地方；left设置为30?px，那么会在元素左边创建30?px的空间，也就是将元素向右移动，效果如图3-5所示。

#box_relative{

position:relative;

left:30px;

top:20px;

}

图3-5相对定位示意图在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，文本流中其他元素的布局就像绝对定位的元素不存在一样，如图3-6所示。

#box_relative{

position:absolute;

left:30px;

top:20px;

}

图3-6绝对定位示意图绝对定位元素的位置是相对于最近的已定位父元素，若没有已定位的父元素，那么它的位置是相对于body的左上角。

使用float定位元素只能在水平方向上定位，而不能在垂直方向上定位。float的定位方式有两种值：float：left和float：right，即让float下方的元素浮动环绕在该元素的左边或者右边。使用float还可以实现两列布局，也就是让一个元素在左浮动，另一个元素在右浮动，并控制这两个元素的宽度。如果不想让float下面的其他元素浮动环绕在该元素的周围，就可以清除该浮动。使用clear方法可以将浮动清除。clear清除浮动有三种值：clear：left，清除左浮动；clear：right，清除右浮动；clear-both，清除所有浮动。

在CSS中，可以处理元素的高度、宽度和深度三个纬度。其高度的处理用height属性，宽度的处理用width属性，而深度的处理则要用z-index属性。z-index属性用于设置元素堆叠的次序，其原理是为每个元素指定一个数字，数字较大的元素将叠加在数字较小的元素之上。其使用格式如下：z-index：auto|number；

其中，auto为默认值，表示遵从其父对象的定位。number是一个无单位的整数值，可以为负数，如果两个绝对定位元素的z-index属性具有相同的number值，则依据该元素在HTML文档中声明的顺序进行层叠；如果绝对定位的元素没有指定z-index属性，则此属性的number值为正数的对象会在该元素之上，而number值为负数的对象则在该元素之下；如果将参数设置为null，则可以消除此属性。该属性只作用于position的属性值为relative或absolute的对象，不作