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
随机推荐
- hp安装oracle报错解决
hpux上安装oracle 11gR2刚开始报错:集群验证框架内部发生了错误 解决办法http://www.it165.net/database/html/201509/14181.html 将文件后 ...
- vbs让电脑发音说话
Dim vbs1 'set vbs1 = WScript.CreateObject("WScript.Shell") set vbs1 = WScript.CreateObject ...
- meta 标签的作用
META标签,是HTML语言HEAD区的一个辅助性标签.在几乎所有的page里,我们都可以看到类似下面这段htm l代码: <head> <meta http-equiv=" ...
- java 支付宝 第三方即时到账支付 接口
alipay 的几个内核功能文件:=================================================================================== ...
- java布局学习 （一）
Java 程序通过jvm可以很好的移植到其他平台上,但是java 生成的图形界面样式,在不使用布局的情况下,往往需要重新设定大小,才能在新的平台上调整到最佳样式.这是由于组件的最佳大小 往往是与平台相 ...
- 利用spring boot创建java app
利用spring boot创建java app 背景 在使用spring框架开发的过程中,随着功能以及业务逻辑的日益复杂,应用伴随着大量的XML配置和复杂的bean依赖关系,特别是在使用mvc的时候各 ...
- Oracle表结构修改触发视图无法正常使用问题
一.问题描述 当对视图使用的基表进行表结构修改后,会触发视图的无效以及编译出错问题,必须重建视图解决. 二.问题再现 1.Oracle10g环境 1.1 创建视图测试用两张基表:TestTable和T ...
- 日文xp系统中 日文键盘模式转英式键盘模式
键盘设备驱动早在Windows XP安装时就已经安装好了,但是系统却将日式键盘误识成了美式标准键盘,这会出现一些标点符号的实际输入与键盘标注不符的问题,对于用惯了英文键盘的人可 以盲打而不去理会,但对 ...
- win7下matlab2016a配置vlfeat
1.下载vlfeat http://www.vlfeat.org/ 2.解压到了matlab安装目录的toolbox下 3.打开vs2013的这个 4.输入nmake version 查看我的版本是 ...
- PHP base64
<?php header('Content-type:text/html;charset=utf-8'); function image_base64($image_file) { // get ...