`

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

分享到:
评论

相关推荐

    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:relative;的作用示例介绍

    引用 static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流..."对于页面中一个static的div#demo,我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该是用这个position:relative

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

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

    目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对position五个值的解释: 其中absolute和relative是最常用的...

    HTML5 3D相册 精美 女朋友礼物

    position: relative; cursor: pointer; -moz-transition: all 0.6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; } #icon div { background: none; ...

    超酷页面左侧导航菜单

    POSITION: relative; HEIGHT: 40px } #cover { VISIBILITY: hidden; OVERFLOW: hidden; WIDTH: 215px; POSITION: absolute; HEIGHT: 40px } #cuscroll { LEFT: 0px; VISIBILITY: inherit; WIDTH: 202px; POSITION...

    position图片定位

    position:relative;margin:50px 0 0 50px;float:left;} .bg span{display:block;width:25px;height:25px;background:url(images/tu.gif) no-repeat left bottom;position:absolute;left:20px;bottom:20px;} .bg p{...

    CSS完美解决前端图片变形问题的方法

    在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一、让图片的宽度或者高度等于容器... position: relative; } img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: tra

    javascript菜单

    部分代码*{ margin:0px; padding:0px; list-style:none; } #caidan a{ width:100px;... float:left;... position:relative; } #caidan ul ul{ position:absolute; top:0px; left:102px; } </style>

    div的position属性

    如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行...

    使用CSS的position属性控制页面布局的入门教程

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值: position: absoluteposition: relativeposition: fixedposition: staticposition: inherit本文主要详细讨论 position 属性的...

    比较炫的图片播放器 js 焦点效果代码

    #focus_m{position:relative; width:420px; height:384px; background:#133775} .f_img_roll{width:350px; height:300px; position:relative;} .f_img_roll img{position:absolute; left:0; top:0; width:350px; ...

    三星9305收索

    vertical-align:top}#lk{margin:33px 0}#lk span{font:14px "宋体"}#lm{height:60px;line-height:15px}#lh{margin:16px 0 5px;word-spacing:3px}#cp,#cp a{color:#666}#cp .c-icon-icrlogo{width:14px;height:17px;...

    仿魅族官网(HTML+CSS)静态界面

    本次设计魅族官网主要运用...多出使用了定位元素position: relative;——position: absolute;使用了多个:hover效果来实现变化。能够巩固熟悉浮动、相对定位,绝对定位、下拉列表、hover效果、整体缩放等知识点的用法。

    H5响应式网页翻牌小游戏代码.zip

     position: relative;  cursor: pointer; } .tile:nth-of-type(4n 1) {  clear: left; } .tile:after {  content: '';  display: block;  width: 100%;  height: 100%;  border-radius: 5%; ...

    dw google页面 源代码

    vertical-align:top}#gbar{float:left}}.gb2{display:block;padding:.2em .5em}a.gb1,a.gb2,a.gb3{color:#00c !important}.gb2,.gb3{text-decoration:none}a.gb2:hover{background:#36c;color:#fff !important}...

    CSS使用特效

    position: absolute; } #thumbs{ width: 100px; height: 300px; overflow: hidden; } #next{ display: block; width: 47px; height: 43px; background: url(img/arrow.png); position: relative; top: ...

    css3给背景图片加颜色遮罩的方法

    前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在... position: relative; width: 1200px; height: 400px; background: rgba(0, 0, 0, .5); } .wrap1 .inner { position: absolute; left: 0; right: 0

    全屏幻灯片JQ+JS+CSS3

    #slideshow{position: relative;height: 300px;width: 930px;margin: 0 auto;} #slideshow a{float: left;display: inline;} #slideshow .img{position: absolute;width: 930px;height: 300px;overflow: hidden} #...

    javascript 弹性菜单,垂直的那种

    body {cursor:hand; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%;....title {position:relative;cursor:pointer;background:#FF6600;width:100%;color:#f

Global site tag (gtag.js) - Google Analytics