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. HUD 5050 Divided Land

    http://acm.hdu.edu.cn/showproblem.php?pid=5050 题目大意: 给定一个矩形的长和宽,把这个矩形分成若干相等的正方形,没有剩余.求正方形的边长最长是多少. 解 ...

  2. hduoj 1286 找新朋友

    http://acm.hdu.edu.cn/showproblem.php?pid=1286 找新朋友 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  3. html5开发移动页面去掉点击出现的透明阴影----&&-----元素垂直居中

    [摘要:做好的页里正在脚机端测试时,发明局部扫瞄器,tap后会涌现一个半通明的灰色配景,(被批...),起先认为是outline作祟,减上后发明出反映,末了发明是tap后的配景下明,要重设那个]   ...

  4. java三大框架

    1定义 集成SSH框架的系统从职责上分为四层:表示层.业务逻辑层.数据持久层和域模块层,以帮助开发人员在短期内搭建结构清晰.可复用性好.维护方便的Web应用程序.其中使用Struts作为系统的整体基础 ...

  5. 【004: gcc 和　clang 的简单比较】

  6. cef 介绍

    介绍 cef 是一个基于google chromiun的简单的框架. 它主要是作为一个内嵌浏览器嵌入到客户端应用程序中. 可以再 http://cefbuilds.com 下载最新的编译版本. 总体框 ...

  7. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数017·point点函数

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数017·point点函数 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...

  8. 1.多线程-NSThread

    1.在主线程执行多次NSLog模拟耗时操作 结果,卡住主线程 解决方案: performSelectorInBackground让程序在后台执行   2.pthread的使用 开辟子线程,执行一个函数 ...

  9. uexQQ插件学习心得

    uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...

  10. 书籍推荐《以C语言解析电脑》

    这本书要想买到,在大陆看起来比较难,理出个目录,看个大概: 另外在这个地方可以预览前20页:http://openebook.hyread.com.tw/ebookservice/hyviewer/o ...