`

position:absolute relative 得到一个对象的top和left

    博客分类:
  • js
阅读更多

当设定position:absolute  ---有父亲无兄弟
如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始

点进行定位
如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为

原始点进行定位。
和相邻的DIV没有关系,不会互相影响

 

 

当设定position:relative ---有兄弟有父亲
不管父级有没有设定position属性,那么当前的relative 则结合TRBL属性以父级(最近)的左上角为原

始点进行定位
如果没有父级,则和相邻的div内容区为原始点,位置由 Top、Right、Bottom、Left 属性决定,且有“撑开或占据高度”的作用,上面例子橙色部分。

 

 

 

var e=obj;
var t=e.offsetTop;  
var l=e.offsetLeft;  
var height=e.clientHeight;  
while(e=e.offsetParent){
 t+=e.offsetTop;  
 l+=e.offsetLeft;
}
 var _top=t;
  var _left=l;

传入一个对象,得到该对象相对于窗口的top和left

分享到:
评论

相关推荐

    CSS中的position 的值: absolute 与 relative

    在CSS(层叠样式表)中,`position`属性是一个至关重要的概念,它用于定义元素在页面布局中的定位方式。`position`属性有多个可选值,其中`absolute`和`relative`是两个最常使用的值,它们在网页设计中扮演着关键...

    css position: absolute、relative详解

    如果元素设置了position: relative,则可以通过left, right, top, 和 bottom属性来调整元素的位置。设置这些属性会使元素相对于它在文档流中的初始位置进行移动,但它的原始位置仍然会被保留,也就是说,即便元素...

    关于position、absolute、relative层叠加的技巧

    Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是默认值,relative、absolute 和 fixed 是动态定位的三种方式。 静态定位(Static Positioning) -------------------------...

    css中position:relative和overflow:hidden的问题

    `position:relative`和`overflow:hidden`的交互主要体现在当一个元素同时设置了这两个属性时。如果一个相对定位的元素的内容超出了其边界,`overflow:hidden`将会裁剪那些超出的部分,使得这部分内容不可见。这对于...

    CSS中的position:relative;的作用示例介绍

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素如何在页面上定位。在你的问题中,你特别关注了`position:relative;`的作用,这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...

    position:relative/absolute无法冲破的等级

    1. **增加嵌套层次**:将`<span>`包裹在一个额外的`<div>`容器内,并对该容器设置`position:relative`,对`<span>`保持`position:absolute`不变。 ```html 第二块 ``` ```css li div { position: ...

    css中position:relative和overflow:hidden之间的问题

    当`position`设置为`relative`时,元素保持其正常流中的位置,但可以通过`top`和`left`等偏移属性进行相对移动,而不会影响其他元素的位置。 `overflow`属性则用于处理内容溢出其容器时的显示方式,它可以设置为`...

    position的relative和absolute总结

    当`position`设为`relative`时,元素保持其在正常文档流中的位置,但我们可以使用`top`、`bottom`、`left`和`right`属性来调整元素相对于其原来位置的偏移量。这种偏移不会影响其他元素的位置,因为相对定位的元素...

    li标签的position:absolute与relative案例应用

    在网页布局设计中,CSS(层叠样式表)的`position`属性是非常关键的一个概念,它决定了元素在页面上的定位方式。本案例中涉及到的是`position`属性的两个值:`relative`和`absolute`,它们在li标签的应用中起到了...

    css的position里的relative和absolute的区别.docx

    CSS Position relative 和 absolute 的区别 在 CSS 中,position 属性 plays a crucial role 在排版元素中。在 position 属性中,有五个值:static、inherit、fixed、absolute 和 relative。今天,我们将深入探讨 ...

    关于CSS position属性值absolute,relative的解释.zip

    当一个元素的`position`被设置为`relative`时,它会保持其在正常文档流中的位置,然后可以通过`top`、`bottom`、`left`和`right`属性来偏移其位置。例如,`#main{position: relative; top: -50px;}`会让元素`#main`...

    CSS教程——元素定位

    使用 position: relative 时,需要配合 top、bottom、left、right 四个属性来确定元素的位置。例如: ```css #div-1 { position: relative; top: 20px; left: 40px; } ``` 相对定位的元素将相对于其原始位置...

    scrollbar_js实现竖向滚动条

    .box-163css{position:relative;height:330px;border:solid 1px #ddd;width:600px;margin:20px auto;} .picul{ width:100%; float:left;} .picul li{ width:115px; height:115px; float:left; margin:0 7px 25px 7px...

    CSS position属性absolute relative等五个值的解释

    《CSS position属性详解:absolute, relative及其他值》 在网页设计中,CSS(层叠样式表)的position属性是至关重要的,它决定了元素在页面上的布局方式。position属性有五个基本值:static、relative、absolute、...

    01拓展-居中方式.pptx

    在上面的代码中,我们首先使用`position: absolute`将盒子定位为绝对定位,然后使用`left: 50%`和`top: 50%`将盒子的左上角移动到父级元素的水平和垂直中心位置。最后,我们使用`margin-left: -150px`和`margin-top:...

    pic_slide.rar

    position:relative} .pic_lists{float:left;width:8888px;height:106px;overflow:hidden;position:absolute;top:0px;left:0px} .btn_change{width:40px;height:60px;position:absolute;text-indent:-9999px;cursor:...

    IE7 position:relative的问题

    按照正常的CSS规范,一个设置了`position:relative`的元素应该在其父元素内移动,但不影响其他兄弟元素的位置。然而,IE7有时需要父元素也具有`position:relative`或者`position:absolute`属性,才能正确地处理子...

    Position属性之relative用法

    当给一个元素设置`position: relative;`后,我们可以使用top、bottom、left和right这些偏移量属性来调整元素的位置。例如,`top: -50px;`会使元素向上移动50像素,但元素在文档流中的原始位置仍然保留,其他元素不会...

    IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    在IE6和IE7浏览器中,存在一个与CSS布局相关的特殊问题,特别是在处理绝对定位(position:absolute)元素和其相邻元素的margin时。这个问题是由于这些老版本的Internet Explorer对CSS标准实现的不完善导致的。本文将...

    JavaScript实现图片的放大缩小及拖拽功能示例

    本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考,具体如下: 实现效果如下: 实现代码: <!...<...position:relative;... div img{position:absolute;height:100%;widt

Global site tag (gtag.js) - Google Analytics