当设定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`属性是一个至关重要的概念,它用于定义元素在页面布局中的定位方式。`position`属性有多个可选值,其中`absolute`和`relative`是两个最常使用的值,它们在网页设计中扮演着关键...
如果元素设置了position: relative,则可以通过left, right, top, 和 bottom属性来调整元素的位置。设置这些属性会使元素相对于它在文档流中的初始位置进行移动,但它的原始位置仍然会被保留,也就是说,即便元素...
Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是默认值,relative、absolute 和 fixed 是动态定位的三种方式。 静态定位(Static Positioning) -------------------------...
`position:relative`和`overflow:hidden`的交互主要体现在当一个元素同时设置了这两个属性时。如果一个相对定位的元素的内容超出了其边界,`overflow:hidden`将会裁剪那些超出的部分,使得这部分内容不可见。这对于...
在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素如何在页面上定位。在你的问题中,你特别关注了`position:relative;`的作用,这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...
1. **增加嵌套层次**:将`<span>`包裹在一个额外的`<div>`容器内,并对该容器设置`position:relative`,对`<span>`保持`position:absolute`不变。 ```html 第二块 ``` ```css li div { position: ...
当`position`设置为`relative`时,元素保持其正常流中的位置,但可以通过`top`和`left`等偏移属性进行相对移动,而不会影响其他元素的位置。 `overflow`属性则用于处理内容溢出其容器时的显示方式,它可以设置为`...
当`position`设为`relative`时,元素保持其在正常文档流中的位置,但我们可以使用`top`、`bottom`、`left`和`right`属性来调整元素相对于其原来位置的偏移量。这种偏移不会影响其他元素的位置,因为相对定位的元素...
在网页布局设计中,CSS(层叠样式表)的`position`属性是非常关键的一个概念,它决定了元素在页面上的定位方式。本案例中涉及到的是`position`属性的两个值:`relative`和`absolute`,它们在li标签的应用中起到了...
CSS Position relative 和 absolute 的区别 在 CSS 中,position 属性 plays a crucial role 在排版元素中。在 position 属性中,有五个值:static、inherit、fixed、absolute 和 relative。今天,我们将深入探讨 ...
当一个元素的`position`被设置为`relative`时,它会保持其在正常文档流中的位置,然后可以通过`top`、`bottom`、`left`和`right`属性来偏移其位置。例如,`#main{position: relative; top: -50px;}`会让元素`#main`...
使用 position: relative 时,需要配合 top、bottom、left、right 四个属性来确定元素的位置。例如: ```css #div-1 { position: relative; top: 20px; left: 40px; } ``` 相对定位的元素将相对于其原始位置...
.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属性是至关重要的,它决定了元素在页面上的布局方式。position属性有五个基本值:static、relative、absolute、...
在上面的代码中,我们首先使用`position: absolute`将盒子定位为绝对定位,然后使用`left: 50%`和`top: 50%`将盒子的左上角移动到父级元素的水平和垂直中心位置。最后,我们使用`margin-left: -150px`和`margin-top:...
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:...
按照正常的CSS规范,一个设置了`position:relative`的元素应该在其父元素内移动,但不影响其他兄弟元素的位置。然而,IE7有时需要父元素也具有`position:relative`或者`position:absolute`属性,才能正确地处理子...
当给一个元素设置`position: relative;`后,我们可以使用top、bottom、left和right这些偏移量属性来调整元素的位置。例如,`top: -50px;`会使元素向上移动50像素,但元素在文档流中的原始位置仍然保留,其他元素不会...
在IE6和IE7浏览器中,存在一个与CSS布局相关的特殊问题,特别是在处理绝对定位(position:absolute)元素和其相邻元素的margin时。这个问题是由于这些老版本的Internet Explorer对CSS标准实现的不完善导致的。本文将...
本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考,具体如下: 实现效果如下: 实现代码: <!...<...position:relative;... div img{position:absolute;height:100%;widt