标签：ack body abs htm css 垂直 分享 页面 add
CSS中，元素的位置是通过偏移来定位的，偏移是相对包含元素的父元素的左上角来定义的，偏移量通常用left(水平)偏移和top(垂直)偏移来设置或读取。
定位的类型：定位的类型用position设置，设置值有absolute , fixed , relative , static ,inhert。
static(静态定位):这是元素的默认的定位方式，遵循默认的文档流,当元素设置static定位时，使用left和top来设置偏移位置是无效的。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>元素的static定位</title> <style type="text/css"> div{ width:200px; height:100px; border:1px solid red ; } div.static{ position:static; left:100px; top:200px;
} </style> </head> <body> <div>第一个div</div> <div>第二个div</div> </body> </html>
上面还没为元素设置定位的显示结果如下图：
为元素设置static定位
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>元素的static定位</title> <style type="text/css"> div{ width:200px; height:100px; border:1px solid red ; } div.static{ position:static; left:100px; top:200px; } </style> </head> <body> <div>第一个div</div> //为元素设置static定位 <div class="static">第二个div</div> </body> </html>
显示结果与没有设置定位的结果是一样的效果
relative(相对定位):这种方式与静态(相似),元素会默认遵循文档流。但是设置了top和left属性时，元素会相对它原始的位置进行偏移。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>元素的relative定位</title> <style type="text/css"> div{ width:200px; height:100px; border:1px solid red ; } div.relative{ position:relative; left:100px; top:30px; } </style> </head> <body>
//元素未设置定位属性
<div>第一个div</div> <div>第二个div</div> </body> </html>
未设置relative定位时，元素默认是static定位效果
为元素设置relative定位，元素会相对自己原始的位置按top和left的设置值进行位置偏移
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>元素的relative定位</title> <style type="text/css"> div{ width:200px; height:100px; border:1px solid red ; } div.relative{ position:relative; left:100px; top:30px; } </style> </head> <body> <div>第一个div</div> //为元素设置relative定位，且设置top和left偏移值 <div class="relative">第二个div</div> </body> </html>
显示效果
absolute(绝对定位)：绝对定位是完全跳出了页面的文档流，设置了绝对定位的元素，会以元素的第一个非静态定位的父元素而显示，如果没有非静态的父元素则以显示窗口为父元素。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>元素的absolute定位</title> <style type="text/css"> div{ width:200px; height:100px; border:1px solid red ; padding:0px; margin:0px; } .absolute{ position:absolute; left:200px; top:30px; } .father{ width:400px; height:400px; border:1px solid blue ; } </style> </head> <body>
//父元素是静态定位时， 设置了absolute定位的子元素会以整个文档窗口为父元素进行偏移
<div class="father"> <div>第一个div</div> <div class="absolute">第二个div</div> </div> </body> </html>
父元素是静态定位时，子元素的绝对定位显示结果。
为父元素设置非静态定位，子元素设置绝对定位
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>元素的absolute定位</title> <style type="text/css"> div{ width:200px; height:100px; border:1px solid red ; padding:0px; margin:0px; } .absolute{ position:absolute; left:200px; top:30px; } .father{ width:400px; height:400px; border:1px solid blue ; posiotion:relative; //为父元素设置相对定位 } </style> </head> <body> <div class="father"> <div>第一个div</div>
<div class="absolute">第二个div</div> </div> </html>
当父元素设置了非静态定位时，子元素会以父元素为基准进行偏移
标签：ack body abs htm css 垂直 分享 页面 add
原文地址：http://www.cnblogs.com/fooken/p/6852417.html
