标签：relative pos body round order css 浏览器 meta 固定
在前台进行页面位置编辑时,时常碰到页面部分标签位置错乱,因此研究了一下通过css进行定位标签的方法.
定位方式:是指如何确定某个标签在页面中的位置.
1.固定定位:始终相对于浏览器窗口进行定位
1 <html> 2 <head> 3 <title>定位方式-固定定位</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 body{ 7 height: 2000px; 8 } 9 div{ 10 width: 500px; 11 height: 300px; 12 border:solid 2px red; 13 position: fixed;/*设置定位方式为固定定位*/ 14 bottom:500px 1px ; 15 } 16 p{ 17 float: right; 18 } 19 20 </style> 21 </head> 22 <body> 23 <div>这是一个div盒子</div><br> 24 <p>这个不会动</p> 25 </body> 26 </html>
2.相对定位:用来对标签的位置进行微调,参照的是标签原来的位置
1 <html> 2 <head> 3 <title>定位方式-相对定位</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 body{ 7 height: 2000px; 8 } 9 #span2{ 10 position: relative;/*设置定位方式为相对定位*/ 11 top: 20px; 12 left: 14px; 13 } 14 </style> 15 </head> 16 <body> 17 <span id="span1">这是一个</span> 18 <span id="span2">这是一个</span> 19 <span id="span3">这是一个</span> 20 </body> 21 </html>
3.绝对定位:元素的位置相对于最近的已定位祖先元素(relative对象),如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块----body
1 <head> 2 <title>定位方式-绝对定位</title> 3 <meta charset="utf-8"> 4 <style type="text/css"> 5 div{ 6 width: 500px; 7 height: 400px; 8 border: solid 2px red; 9 /*给div设置相对定位，使得div作为section的参照物进行绝对定位*/ 10 position: relative; 11 } 12 section{ 13 width: 50px; 14 height: 40px; 15 background-color: yellow; 16 position: absolute;/*设置定位方式为绝对定位*/ 17 /*让section始终在div右下角*/ 18 /*让section相对在div右侧距离为0*/ 19 /*让section相对在div低侧距离为0*/ 20 /*绝对定位必须设置参照物，若未设置参照物，则相对于body进行定位*/ 21 right: 0px; 22 bottom: 0px; 23 } 24 25 </style> 26 </head> 27 <body> 28 <div> 29 <section></section> 30 </div> 31 </body>
懂得了这三种通过css进行定位的方式,相信以后前台页面标签错乱的问题就会得到很好地解决.
标签：relative pos body round order css 浏览器 meta 固定
原文地址：http://www.cnblogs.com/loveless1210/p/7087255.html
