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的更多相关文章

  1. 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight

    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...

  2. 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

    offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...

  3. JS：offsetWidth\offsetleft 等图文解释

        网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.of ...

  4. 关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

    offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(widt ...

  5. 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 ...

  6. clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

    一.定义和用法 1.event.clientX:事件对象的水平偏移量: event.clientY:事件对象的垂直偏移量: 2.event.pageX:事件对象加上滚动距离后的水平偏移量: event ...

  7. offsetLeft和style.left的区别

    offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...

  8. offsetLeft与offsetTop详解

    offsetLeft与offsetTop使用方法一样,只是一个是找距离定位父级(position:relative)左边的距离,一个是找距离定位父级上边的距离 没有定位则找body,我们还是看看ie7 ...

  9. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

随机推荐

  1. zip命令的常用选项

    zip命令的常用选项 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家都知道,在linux上一切皆文件,在实际生产环境中,如果我们需要部署一些系统的服务,我们会将一些软件包提前下 ...

  2. Ajax跨域的几种方法以及每种方法的原理

    js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...

  3. zjuoj 3773 Paint the Grid

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3773 Paint the Grid Time Limit: 2 Secon ...

  4. caffe学习笔记（一），ubuntu14.04+GPU (用Pascal VOC2007训练数据，并测试)

    把源代码跑起来了,将实验过程记录如下,用于新手入门. 今天和师兄师姐才跑通,来分享下心得.(预训练网络:ImageNet_model,训练集:PASCAL VOC2007, GPU) 首先,整个tra ...

  5. （一）sql入门 导读

    从转行做软件始,就开始接触sql,但还是不怎么深入,回忆3月份找工作的时候,左关联都没有写出来,真是丢脸,以此博客做个认真的开始. 以后的日子,遇到了圆柱体的空心物体,我就应该联想到一样东西,那就是数 ...

  6. Asp.net MVC5引用ExtJS6

    摘要:VisualStuio2015 asp.net mvc如何引用ExtJS6,使用BundleConfig. 首先下载ExtJS6.0 gpl版.ExtJS有自己的程序框架,但我们需要asp.ne ...

  7. QT 中文显示问题

    在QT4 中,要显示中文,都是要这样写: #include <QTextCodec> QTextCodec::setCodecForTr(QTextCodec::codecForLocal ...

  8. MySQL主从同步配置(Ubuntu)

    一.在两台Linux机器上安装MySQL 二.Master主服务器配置(192.168.1.3) 1.编辑my.cnf(命令查找文件位置:find / -name my.cnf) vi /etc/my ...

  9. win10 使用docker

    新手 win10 下使用docker 1:下载docker for win 2:查看docker使用文档 https://github.com/widuu/chinese_docker 3 : 下载镜 ...

  10. ORACLE表的恢复

         对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有: 1.从flash back里查询被删除的表     select * from ...