当设定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
分享到:
相关推荐
.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...
引用 static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流..."对于页面中一个static的div#demo,我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该是用这个position:relative
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:...
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对position五个值的解释: 其中absolute和relative是最常用的...
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: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{...
在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一、让图片的宽度或者高度等于容器... position: relative; } img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: tra
部分代码*{ 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>
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行...
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值: position: absoluteposition: relativeposition: fixedposition: staticposition: inherit本文主要详细讨论 position 属性的...
#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; ...
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;...
本次设计魅族官网主要运用...多出使用了定位元素position: relative;——position: absolute;使用了多个:hover效果来实现变化。能够巩固熟悉浮动、相对定位,绝对定位、下拉列表、hover效果、整体缩放等知识点的用法。
position: relative; cursor: pointer; } .tile:nth-of-type(4n 1) { clear: left; } .tile:after { content: ''; display: block; width: 100%; height: 100%; border-radius: 5%; ...
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}...
position: absolute; } #thumbs{ width: 100px; height: 300px; overflow: hidden; } #next{ display: block; width: 47px; height: 43px; background: url(img/arrow.png); position: relative; top: ...
前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在... position: relative; width: 1200px; height: 400px; background: rgba(0, 0, 0, .5); } .wrap1 .inner { position: absolute; left: 0; right: 0
#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} #...
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