left和offsetLeft
1.当该对象的position为relative时，根据自己最初的位置进行定位，不受父级的定位影响。
例：
.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;}
2.当该对象的position为fixed时，根据窗口的视图进行定位，不受父级的定位影响。
例：
.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;}
3.position:sticky 粘性定位，相对于父级和BFC进行定位。类似fixed定位和relative的混合。只有指定了top、left 、right、bottom 其中的一个值才能生效转成粘性定位，否则一直为relative定位。
例如：.b{position:sticky;top:10px;} 当b相对父级的位置小于等于10px的时候，b会转成{position:fixed;top:10px;},否则为{position:relative;top:10px;}
4.当该对象的定位position为absolute时left是相对于拥有定位属性（position的值为默认值"static"时除外）的父级对象的左边距。
例1：当父级a的position为relative、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）或者position为static时，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;top:0;left:0;}
offsetLeft ：
相对于父级的左边距。
left和offsetLeft的更多相关文章
- 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...
- 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释
offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...
- JS：offsetWidth\offsetleft 等图文解释
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.of ...
- 关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明
offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(widt ...
- CSSOM视图模式(CSSOM View Module)相关整理：scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别
转:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-mo ...
- clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别
一.定义和用法 1.event.clientX:事件对象的水平偏移量: event.clientY:事件对象的垂直偏移量: 2.event.pageX:事件对象加上滚动距离后的水平偏移量: event ...
- offsetLeft和style.left的区别
offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...
- offsetLeft与offsetTop详解
offsetLeft与offsetTop使用方法一样,只是一个是找距离定位父级(position:relative)左边的距离,一个是找距离定位父级上边的距离 没有定位则找body,我们还是看看ie7 ...
- js的offsetWidth,offsetHeight,offsetLeft,offsetTop
js的offsetWidth,offsetHeight,offsetLeft,offsetTop
随机推荐
- 用Canvas制作剪纸效果
在做剪纸效果之前,先介绍剪纸效果运用到的一些知识: 1.阴影: 在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果: shadowColor:CSS格式的颜色字串.默认 ...
- 点餐系统sprint3总结
转眼间,sprint3也结束了.意味着软件工程的课程结束了,我们的项目也完成了.在队友们的认真学习,专注打码,辛苦赶工后,我们的项目完成了.显然是仓促中完成的,没有完美的界面.没有无bug的项目,但是 ...
- 如何在自己的代码中实现分享视频文件或者是图片文件到微信 QQ微博 新浪微博等！！！
首先在文档第一句我先自嘲下 , 我是大傻逼, 弄了两天微信是视频分享,一直被说为啥跟系统的相册分享的不一样,尼玛!!! 这里来说正文,我这里不像多少太多,大家都是程序猿,具体的阔以看代码. 搞代码之前 ...
- Linux 常用服务总结
使用linux有一段时间了,把自己在身边经常听到,使用linux经常遇到的linux常见服务总结出来,这样遇到问题会有更多的解决问题的办法,听别人摆这些专业术语时,才不会不知所云. 服务: 1.NFS ...
- Objective-C基础2
16.继承 1)不能和父类定义一样的变量 2)单一继承,不支持继承多个类 3)支持多层继承子类也可以被继承 17.实例变量修饰符 public:公开的,在其他类中也可以访问 protected:受保护 ...
- iOS多线程同步锁
在iOS中有几种方法来解决多线程访问同一个内存地址的互斥同步问题: 方法一,@synchronized(id anObject),(最简单的方法)会自动对参数对象加锁,保证临界区内的代码线程安全 @s ...
- Cortex-M3中C与汇编的交互
以下内容摘自<ARM Cortex-M3权威指南> 概览 在CM3 上编程,既可以使用C 也可以使用汇编.可能还有其它语言的编译器,但是大多数人还是 ...
- <input type='file'/>把默认样式改成框框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用java代码手动控制kafkaconsumer偏移量
为应对消费结果需要存储到关系数据库中,避免数据库down时consumer继续消费的场景 http://kafka.apache.org 查了很多源码都记录下来,省的下次还要过滤源码. //如果将结果 ...
- ASP.NET MVC5----基本用法
由于之前在项目中也使用MVC进行开发,但是具体是那个版本就不是很清楚了,但是我觉得大体的思想是相同的,只是版本高的在版本低的基础上增加了一些更加方便操作的东西.下面是我学习ASP.NET MVC5高级 ...