码迷,mamicode.com
首页 > Web开发 > 详细

css中三种定位详细介绍

时间:2017-06-27 23:39:42      阅读:294      评论:0      收藏:0      [点我收藏+]

标签: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进行定位的方式,相信以后前台页面标签错乱的问题就会得到很好地解决.

css中三种定位详细介绍

标签:relative   pos   body   round   order   css   浏览器   meta   固定   

原文地址:http://www.cnblogs.com/loveless1210/p/7087255.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!