我的书签
添加书签
移除书签12.8 定位属性
使用定位属性可以控制元素的位置，包括相对定位和绝对定位两种方式。相对定位是指允许元素在相对于文档布局的原始位置上进行偏移，而绝对定位是指允许元素与原始的文档布局分离且任意定位。
12.8.1 定位方式position
使用定位方式属性可以控制浏览器应如何定位HTML元素。
语法：
说明：
static表示默认值；
absolute表示采用绝对定位，需要同时使用left、right、top和bottom等属性进行绝对定位；
fixed表示当页面滚动时，元素不随着滚动；
relative表示采用相对定位，对象不可层叠。
12.8.2 元素位置top、right、bottom、left
元素位置属性与定位方式共同设置元素的具体位置。
语法：
说明：
auto表示采用默认值；长度值包含数字和单位，也可以使用百分比来设置。
举例：
在代码中加粗部分的标记用来设置元素位置为绝对定位absolute，top: 26px表示距顶部距离为26像素，right: 23px表示距右边框距离为23像素，在浏览器中预览效果，如图12.43所示。
图12.43 元素位置效果
12.8.3 层叠顺序z-index
使用层叠顺序可以设置层的先后顺序和覆盖关系。默认情况下，z-index值为1，表示该层位于最底层。
语法：
说明：
auto遵从其父对象的定位；数字必须是无单位的整数值，可以取负值。
举例：
此段代码中首先在<head></head>之间，用<style>定义了d标记中的position属性为absolute，z-index为1表示默认最底层，定义了d1标记中的position属性为absolute，z-index为2，然后分别对图像和段落文本应用d和d1样式。在浏览器中预览效果，如图12.44所示。
图12.44 层叠顺序效果
提示
在这里图像应用d类的层的z-index属性为1,文字应用dl类的层的z-index属性为2,可以看到d层的内容被dl层的内容所遮盖，表明了z-index属性值越高，它的层就越靠上。
12.8.4 浮动属性float
使用浮动属性float可以设置文字在某个元素的周围，它能应用于所有的元素。
语法：
说明：
none是默认值，表示对象浮动；left表示文字浮动在元素的右边；right表示文字浮动在元素的左边。
举例：
在代码中img{float:left}标记用来设置图像在文字左边，在浏览器中预览效果，如图12.45所示。如图12.46所示使用浮动属性设置文本与圣诞老人排版方式。
图12.45 浮动属性效果
图12.46 设置浮动属性方式
12.8.5 清除属性clear
清除属性用于指定一个元素是否允许有其他元素漂浮在它的周围。
语法：
说明：
none表示允许两边都可以有浮动对象，是默认值；
left表示不允许左边有浮动对象；
right表示不允许右边有浮动对象；
both表示不允许有浮动对象。
举例：
虽然使用img{float:left}属性可以设置图像浮动在左边，但是clear:left属性设置了不允许左边有浮动对象，在浏览器中预览效果，如图12.47所示，可以看到图像不在文本左边浮动。
图12.47 清除属性效果
12.8.6 可视区域clip
使用clip属性可以限定只显示裁切出的区域，裁切出的区域为矩形。只要设置两个点即可，一个是矩形左上角的顶点，由top和left两项设置完成，另一个是右下角的顶点，由bottom和right两项设置完成。
语法：
说明：
auto表示对象不裁切，是默认值。rect（数字）表示它依据上、右、下、左的顺序提供自对象左上角（0, 0）坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不裁切。
举例：
在代码中加粗部分的标记用来设置可视区域，在浏览器中预览效果，如图12.48所示。
图12.48 可视区域效果
12.8.7 层的宽度和高度width、height
width和height分别用于设置层的宽度和高度。
语法：
说明：
auto表示自动设置长度，一般以层包含的内容为准，如果要设置确切的长度，需要设置数值和单位。
举例：
在代码中加粗部分的标记用来设置层的宽度和高度，将宽度设置为450px，将高度设置为50px，在浏览器中预览效果，如图12.49所示，可以看到应用q1样式的文本的宽度和高度分别为450像素和50像素。
图12.49 设置层高度和宽度
12.8.8 超出范围overflow
使用overflow属性可以设置当层内的内容超出层所能容纳的范围时的显示方式。
语法：
说明：
visible表示层的大小和内容都会自动显示出来；
auto表示只在内容超出层的范围时才显示滚动条；
hidden表示会隐藏超出层范围的内容；
scroll表示总是显示滚动条。
举例：
在代码中overflow: scroll表示无论内容是否超出层的范围，都将显示滚动条，在浏览器中预览效果，如图12.50所示。
图12.50 显示滚动条
12.8.9 可见属性visibility
visibility属性是针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层和被嵌套的层。
语法：
说明：
inherit表示继承父对象的可见性，是默认值；
visible表示无论父层对象是否可见，子层都是可见的；
hidden表示无论父层对象是否可见，子层都隐藏。
举例：
在代码中加粗部分的标记用来设置可见属性，将img的可见属性设置为hidden，效果如图12.51所示，如果将img的可见属性设置为visible，效果如图12.52所示。
图12.51 设置可见属性
图12.52 调整可见属性
