本文主要是介绍position:relative的用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
position:relative
日常应用的时候一般是设置给position:absolute;
的父层的,
父层position:relative;
子层position:absolute
;的话, 就是依照父层的边界进行定位的, 不然position:absolute
会逐层向上寻找设置了position:relative
的元素边界, 直到body
元素…
比如要实现商品细节图展示的效果,可以使用如下的方法,这个例子很好的解释了position方法的使用。
这个页面中,右侧大的图片所在的div class="big
"需要设置absolute
的绝对定位,那它的父元素.box
就必须设置relative
相对定位。
左侧小图中的红色方块需要随着鼠标移动,因此也需要设置absolute的绝对定位。那么它的父元素.small
就必须设置relative
相对定位。
右侧div中的大图片需要随鼠标移动,因此它也需要设置absolute
绝对定位,而它的父元素.big
已经是absolute
绝对定位了,因此大图片的定位是相对.big
来的。大图片的坐标(0,0)的位置在右侧div的左上角的位置。
图中红色方块的移动方向和大图片的移动方向是相反并且成比例的。大图片的移动距离是方块移动距离的倍数。
<style type="text/css">.box{position: relative;}.small{position: relative;width: 350px;height: 350px;border: solid 1px darksalmon;}.mask{position: absolute;width: 80px;height: 80px;background-color: rgba(223,24,22,0.2);display: none;}.big{position: absolute;left: 360px;top: 0px;border: solid 1px darksalmon;width: 400px;height: 400px;overflow: hidden;/*display: none;*/}#bigimg{position: absolute;left: 0px;top:0px;border: solid seagreen 1px;}</style></head><body><div class="box"><div id="small" class="small"><img id="smallimg" src="img/small.jpg"/><div id="mask" class="mask"> </div></div><div class="big" id="big"><img id="bigimg" src="img/big.jpg" /></div></div>
这段代码实现商品细节图的页面框架设计
下面是javaScript的实现代码
<script type="text/javascript">function $ (id) {return document.getElementById(id)}$("small").onmouseover=function () {$("mask").style.display="block"$("big").style.display="block"}$("small").onmouseout=function () {$("mask").style.display="none"$("big").style.display="none"}$("small").onmousemove=function (e) {var event = e ||window.event//鼠标在文档的位置var pageX = event.pageX||event.clientX+document.documentElement.scrollLeftvar pageY = event.pageY||event.clientY+document.documentElement.scrollTop//mask的位置 = 鼠标的位置-mask的一半宽度var maskX = pageX - $("mask").offsetWidth/2var maskY = pageY - $("mask").offsetHeight/2//mask可以移动的范围if (maskX<0) {maskX=0} else if(maskX>$("small").offsetWidth-$("mask").offsetWidth){maskX=$("small").offsetWidth-$("mask").offsetWidth}if (maskY<0) {maskY=0} else if(maskY>$("small").offsetHeight-$("mask").offsetHeight){maskY=$("small").offsetHeight-$("mask").offsetHeight}$("mask").style.left=maskX+"px"$("mask").style.top=maskY+"px"var bigImg = $("bigimg").offsetWidth-$("big").offsetWidthvar mask = $("small").offsetWidth-$("mask").offsetWidthvar rate = bigImg/mask//bigimg的坐标$("bigimg").style.top = -rate*maskY+"px"$("bigimg").style.left= -rate*maskX+"px"console.log($("bigimg").style.top)}</script>
这篇关于position:relative的用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!