码迷,mamicode.com
首页 > 其他好文 > 详细

left和offsetLeft

时间:2016-05-27 14:44:52      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

left:

1.当该对象的定位position为absoluteleft是相对于拥有定位属性(position的值为默认值"static"时除外)的父级对象的左边距。

例1:当父级a的positionrelative、absolute或者fixed时,b都根据a进行定位。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title></title>
 7 <style>
 8     .a{width: 200px;height: 200px;border: 1px solid red;margin-top: 100px;margin-left:100px;position:relative;}
 9     .b{width:100px;height: 100px;position:absolute;background-color:pink;top:0;left:0;}
10 </style>
11 </head>
12 <body>
13     <div class="a">
14         <div class="b"></div>
15     </div>
16 </body>
17 </html>

技术分享

例2:当a没有设定位(position)或者positionstatic时,b根据浏览器的左上角定位。

.a{width: 200px;height: 200px;border: 1px solid red;margin-top: 100px;margin-left:100px;position:static;}
.b{width:100px;height: 100px;position:absolute;background-color:pink;top:0;left:0;}

技术分享

2.当该对象的positionrelative时,根据自己最初的位置进行定位,不受父级的定位影响。

例:

.a{width: 200px;height: 200px;border: 1px solid red;margin-top: 100px;margin-left:100px;position:absolute;}
.b{width:100px;height:100px;position:relative;background-color:pink;top:50px;left:50px;}

技术分享

3.当该对象的positionfixed时,根据窗口的视图进行定位,不受父级的定位影响。

例:

.a{width: 200px;height: 200px;border: 1px solid red;margin-top: 100px;margin-left:100px;position:absolute;}
.b{width:100px;height:100px;position:fixed;background-color:pink;top:50px;left:50px;}

技术分享

offsetLeft :

相对于父级的左边距。

  

        

 

left和offsetLeft

标签:

原文地址:http://www.cnblogs.com/sgzg/p/5534396.html

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