元素的定位
网页中的元素如果没有定义位置和布局，则通常是按照默认的方式排列。通过定位属性，可以将元素定位到任何显示位置。
16.1.1 定位属性标签代码position
css中提供了4种定位方式，最常用的有2种：相对定位和绝对定位。相对定位是设置元素相对于其他元素的位置；绝对定位则是以原始文档为参照，设置元素的偏移距离。
【标签说明】
position:absolute—fixed—relative—static
说明：取值为absolute表示采用绝对定位。relative则表示采用相对定位，元素以自身位置为基准，按照偏移的属性值显示位置。fixed为固定值，浏览器不支持。static是默认值，元素按照默认排列方式显示。
【实例】
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS控制元素定位</title> <style type="text/css"> <! -- div { position:absolute; left:50px; top:50px; border:thin solid #3366FF } --> </style> </head> <body> <div> 世界不会在意你的自尊，人们看的只是你的成就。在你没有成就以前，切勿过分 强调自尊 </div> </body> </html>
【运行结果】
上述代码设定了层的位置，并采用绝对定位的方式，规定了上边偏移距离和左侧偏移距离，运行结果如
CSS控制元素位置
16.1.2 上边偏移标签代码top
上边偏移（top）属性用来定义元素距离顶端的垂直距离，相当于元素距离顶点的纵坐标位置。
【标签说明】
top:auto—length—percent
说明：top的取值可以是由数值和单位组成的长度值，默认单位是像素，也可以取百分值。需要先设定是采用相对定位还是绝对定位，才能够正确显示。
【实例】
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS控制元素定位</title> <style type="text/css"> <! -- div { position:absolute; top:50px; border:thin solid #3366FF } --> </style> </head> <body> <div> 世界不会在意你的自尊，人们看的只是你的成就。在你没有成就以前，切勿过分 强调自尊 </div> </body> </html>
【运行结果】
在上述代码中，页面的层元素采用绝对定位，距离顶端距离为50像素，运行的效果如
CSS控制上边偏移
16.1.3 左边偏移标签代码left
左边偏移（left）属性用来定义元素距离左侧的距离，相当于元素距离左侧元素的横坐标位置。
【标签说明】
left: auto—length—percent
说明：left的取值可以是由数值和单位组成的长度值，默认单位是像素，也可以取百分值。需要先设定是采用相对定位还是绝对定位，才能够正确显示。
【实例】
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS控制元素定位</title> <style type="text/css"> <! -- .dv1 { position:absolute; left:100px; top:auto; border:thin solid #3366FF } .dv2 { position:relative; left:50px; top:100px; border:1px solid #99FF00 } --> </style> </head> <body> <div class="dv1"> 世界不会在意你的自尊，人们看的只是你的成就。在你没有成就以前，切勿过分 强调自尊 </div> <div class="dv2"> 你只是中学毕业，通常不会成为CEO，直到你把CEO职位拿到手为止 </div> </body> </html>
【运行结果】
在上述代码中，第1个层元素距左端距离是100像素，第2个层元素距左端距离是50像素，运行结果如
CSS控制元素左边偏移
16.1.4 右边偏移标签代码right
右边偏移（right）属性与左边偏移属性类似，设置元素距离右端的水平距离。
【标签说明】
right: auto—length—percent
说明：right 的取值可以是由数值和单位组成的长度值，默认单位是像素，也可以取百分值。需要先设定是采用相对定位还是绝对定位，才能够正确显示。
【实例】
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS控制元素定位</title> <style type="text/css"> <! -- .dv1 { position:absolute; right:200px; top:auto; border:thin solid #3366FF } .dv2 { position:relative; right:50px; top:100px; border:1px solid #99FF00 } --> </style> </head> <body> <div class="dv1"> 世界不会在意你的自尊，人们看的只是你的成就。在你没有成就以前，切勿过 分强调自尊 </div> <div class="dv2"> 你只是中学毕业，通常不会成为CEO，直到你把CEO职位拿到手为止 </div> </body> </html>
【运行结果】
在上述代码中，第1个层元素距右端距离是200像素，第2个层元素距右端距离是50像素，运行结果如
CSS控制元素右边位移
注意：一般情况下，如果为了确定层的起始位置而设置位置元素，仅设置top和left两个属性就可以。
16.1.5 下边偏移标签代码bottom
下边偏移（bottom）属性用来定义元素距离底端的垂直距离。
【标签说明】
bottom: auto—length—percent
说明：bottom 的取值可以是由数值和单位组成的长度值，默认单位是像素，也可以取百分值。需要先设定是采用相对定位还是绝对定位，才能够正确显示。
【实例】
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS控制元素定位</title> <style type="text/css"> <! -- .dv1 { position:absolute; right:200px; bottom:200px; border:thin solid #3366FF } .dv2 { position:absolute; right:50px; bottom:100px; border:1px solid #99FF00 } --> </style> </head> <body> <div class="dv1"> 世界不会在意你的自尊，人们看的只是你的成就。在你没有成就以前，切勿过 分强调自尊 </div> <div class="dv2"> 你只是中学毕业，通常不会成为CEO，直到你把CEO职位拿到手为止 </div> </body> </html>
【运行结果】
在上述代码中，将设置第1个层元素的底部位置距离页面底端200像素，第2个层元素的底部位置距离页面底端100像素，运行结果如
层元素的底部位置
16.1.6 层叠定位标签代码z-index
当一个页面内有多个定位元素时，可能发生定位元素重叠的情况，通过使用层叠定位属性设置定位顺序，就不会将页面中需要显示的内容遮挡住。一般情况下，越往后添加的层，位置也越靠上。
【标签说明】
z-index：顺序号
说明：该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近；如果为负数，则表示离用户更远。
【实例】
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS控制元素定位</title> <style type="text/css"> <! -- .dv1 { position:absolute; top:20px; left:20px; z-index:1; border:thin solid #3366FF } .dv2 { position:absolute; top:150px; left:40px; z-index:3; border:1px solid #99FF00 } .img{ position:absolute; z-index:2; border:thin solid #FF3333 } --> </style> </head> <body> <div class="dv1"> 世界不会在意你的自尊，人们看的只是你的成就。在你没有成就以前，切勿过分 强调自尊 </div> <div class="img" ><img src="../第15章代码/water.jpg" width="174" height="229"> </div> <div class="dv2"> 你只是中学毕业，通常不会成为CEO，直到你把CEO职位拿到手为止 </div> </body> </html>
【运行结果】
在上述代码中，第1个层元素的层叠顺序设置为1，
层叠顺序的设置效果
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。