position:relative的用法

2024-08-20 22:08
文章标签 用法 position relative

本文主要是介绍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的用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1091303

相关文章

bytes.split的用法和注意事项

当然,我很乐意详细介绍 bytes.Split 的用法和注意事项。这个函数是 Go 标准库中 bytes 包的一个重要组成部分,用于分割字节切片。 基本用法 bytes.Split 的函数签名如下: func Split(s, sep []byte) [][]byte s 是要分割的字节切片sep 是用作分隔符的字节切片返回值是一个二维字节切片,包含分割后的结果 基本使用示例: pa

UVM:callback机制的意义和用法

1. 作用         Callback机制在UVM验证平台,最大用处就是为了提高验证平台的可重用性。在不创建复杂的OOP层次结构前提下,针对组件中的某些行为,在其之前后之后,内置一些函数,增加或者修改UVM组件的操作,增加新的功能,从而实现一个环境多个用例。此外还可以通过Callback机制构建异常的测试用例。 2. 使用步骤         (1)在UVM组件中内嵌callback函

这些ES6用法你都会吗?

一 关于取值 取值在程序中非常常见,比如从对象obj中取值 const obj = {a:1b:2c:3d:4} 吐槽: const a = obj.a;const b = obj.b;const c = obj.c;//或者const f = obj.a + obj.b;const g = obj.c + obj.d; 改进:用ES6解构赋值

2021-8-14 react笔记-2 创建组件 基本用法

1、目录解析 public中的index.html为入口文件 src目录中文件很乱,先整理文件夹。 新建components 放组件 新建assets放资源   ->/images      ->/css 把乱的文件放进去  修改App.js 根组件和index.js入口文件中的引入路径 2、新建组件 在components文件夹中新建[Name].js文件 //组件名首字母大写

Cmake之3.0版本重要特性及用法实例(十三)

简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+AOSP14系统攻城狮入门视频实战课 🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧

关于断言的部分用法

1、带变量的断言  systemVerilog assertion 中variable delay的使用,##[variable],带变量的延时(可变延时)_assertion中的延时-CSDN博客 2、until 的使用 systemVerilog assertion 中until的使用_verilog until-CSDN博客 3、throughout的使用   常用于断言和假设中的

ExpandableListView的基本用法

QQ上的好友列表在Android怎么实现,有一个最简单的方法,那就是ExpandableListView,下面简单介绍一下ExpandableListview的用法。 先看看效果图,没有找到大小合适的图片,所以凑合着看吧。     一、准备工作(界面,和需要的数据)             <? xml   version = "1.0"   encoding =

Hbase 查询相关用法

Hbase 查询相关用法 public static void main(String[] args) throws IOException {//Scan类常用方法说明//指定需要的family或column ,如果没有调用任何addFamily或Column,会返回所有的columns; // scan.addFamily(); // scan.addColumn();// scan.se

BeanUtils.copyProperties()在不同包下,用法不同!!! 切记!!!

用法一: 在import org.springframework.beans.BeanUtils;包下: <span style="white-space:pre"> </span>//赋值vo对象的值到po中 <span style="white-space:pre"> </span>/** <span style="white-space:pre"> </span>* <spa

Mybatis注解用法

MyBatis(八) mybatis注解 一、mybatis简单注解 1、@Select、@Results、@Result2、@Delete、@Param、@ResultMap3、@Insert、@SelectKey4、@Delete、@Param5、@Update二、动态SQL 1、简单处理,直接使用``脚本2、使用Provider注解标识 2.1、创建Provider类2.2、注解使用Prov