使用定位样式可以控制元素的位置,常用的定位方式包括3种定位方式,一种是static定位方式,即默认定位方式,一种是relative定位方式,即相对定位方式和最后一种为absolute定位方式,即绝对定位方式。
1.定位样式position
定位样式position的语法:
- position:取值
其中,取值有3个:
默认值:static
相对定位:relative
绝对定位:absolute
默认定位static
采用默认定位时,一般可以不用设置position样式即可。例子:
<!doctype html> <html> <head> <title>定位样式</title> <meta charset="utf-8"> <style> .par{width:300px;height:300px;border:1px solid red;background-color:red;} .sub1{width:100px;height:100px;border:1px solid red;background-color:green;} .sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;} </style> </head> <body> <div class="par"> <div class="sub1">sub1</div> <div class="sub2">sub2</div> </div> </body> </html>
注意:按照默认定位时,各个元素是按照文档流的形式向下往下排,同时保证块状元素独占一行的原则。
相对定位relative
生成相对定位的元素,相对于其正常位置进行定位,同时配合top, bottom, left和right样式完成定位,例如:
<!doctype html> <html> <head> <title>定位样式</title> <meta charset="utf-8"> <style> .par{width:300px;height:300px;border:1px solid red;background-color:red;} .sub1{position:relative;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;} .sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;} </style> </head> <body> <div class="par"> <div class="sub1">sub1</div> <div class="sub2">sub2</div> </div> </body> </html>
注意:此时class值为sub1的定位样式为relative,它的定位没有影响sub2的定位,即sub2还是在原来的位置,但是sub1元素则是相对于它为默认定位方式时的位置,向下移动10px,同时向右移动10px。
绝对定位absolute
对于绝对定位的元素,则需要分其的父元素及以上元素的定位情况来说:
如果其父元素中有设置了Position属性,并且属性值为 absolute 或 relative的时候,那么子元素相对于该父元素来进行定位。
如果不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位。
例如(不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位):
<!doctype html> <html> <head> <title>定位样式</title> <meta charset="utf-8"> <style> .par{margin-top:40px;width:300px;height:300px;border:1px solid red;background-color:red;} .sub1{position:absolute;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;} .sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;} </style> </head> <body> <div class="par"> <div class="sub1">sub1</div> <div class="sub2">sub2</div> </div> </body> </html>
注意:对于sub1元素设置了绝对定位,但是其父元素没有设置定位方式,则其就相对于浏览器定位,即相当于浏览器,向下称移动10px,向右移动10px,同时需要注意,由于sub1是绝对定位,则其会脱离文档流,则其下面的sub2元素的位置就向上移动了。
例如(父元素中有设置了Position属性,并且属性值为 absolute 或 relative的时候,那么子元素相对于该父元素来进行定位):
<!doctype html> <html> <head> <title>定位样式</title> <meta charset="utf-8"> <style> .par{position:relative;top:40px;width:300px;height:300px;border:1px solid red;background-color:red;} .sub1{position:absolute;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;} .sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;} </style> </head> <body> <div class="par"> <div class="sub1">sub1</div> <div class="sub2">sub2</div> </div> </body> </html>
注意:由于sub1元素的父元素par设置position并且设置为relative,所以sub1元素绝对定位是相对于其父元素来说,向下移动10px,向右移动10px,同时需要注意,由于sub1是绝对定位,则其会脱离文档流,则其下面的sub2元素的位置就向上移动了。
原文地址:http://www.tongtongxue.com/archives/10015.html?ref=myread