position:relative的用法

最新推荐文章于 2023-10-21 09:42:12 发布

波西塔塔Y

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量1.7w

点赞数 15

分类专栏： js 网页设计文章标签： javascript css html

本文链接：https://blog.csdn.net/u012881559/article/details/103704963

版权

网页设计同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

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.scrollLeft
				var pageY = event.pageY||event.clientY+document.documentElement.scrollTop
				
				//mask的位置 = 鼠标的位置-mask的一半宽度
				var maskX = pageX - $("mask").offsetWidth/2
				var 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").offsetWidth
				var mask = $("small").offsetWidth-$("mask").offsetWidth
				var rate = bigImg/mask
				
				//bigimg的坐标
				$("bigimg").style.top = -rate*maskY+"px"
				$("bigimg").style.left= -rate*maskX+"px"
				console.log($("bigimg").style.top)
				
			}
			</script>

波西塔塔Y

关注

15
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
position:relative的用法

position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素…比如要实现商品细节图展示的效果，可以使用如...
复制链接

扫一扫