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的用法相关推荐
- div 固定不动 另一个div 有滚动条,position: relative的用法
div 固定不动在顶端, 另一个div 的内容可以滚动显示,position: relative的用法 关键的代码: 1.给父辈Div添加的基本属性:position: relative 2.确定不会 ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
- CSS中的position:relative理解
今晚来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为三种情况进行说明 包含关系:父级absolute,子级relative: 包含关系 ...
- IE6Bug,外层container设置了overflow:auto,但是内层嵌套元素有position:relative的时候,显示错误。...
HTMl代码: <div id="container"><div id="a"></div><div id=" ...
- 深入理解position:relative 与 position:absolute(divb相对于diva进行绝对定位)
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relative ...
- position: relative;导致页面卡顿
1.现象: vue单页面项目 只有在某个页面切换的时候出现页面卡顿现象 经过长时间排查 确定最终原因是 该模块外层div使用 position: relative 根本原因:待完善 转载于:http ...
- position:relative 与 position:absolute
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
- ie6/7 position relative overflow
ie6/7 父容器overflow:auto; 子容器position:relative; 时 子容器下面超出的部分会显示在父容器的外边. 解决办法: 父容器也加 position:relative
- IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含
BUG描述: 页面中某DIV使用了position:relative,结合top=-25px等元素定位.在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动. 分析: 这是IE6一个已知 ...
最新文章
- 中文输入法切换ubuntu_切换到 Linux 工作,体验暴增 100 倍!
- 推荐算法炼丹笔记:Deep Bayesian的多目标推荐
- .Net与Oracle地数据库连接池(Connection Pool)
- 数据结构与算法--第一个只出现一次的字符
- JOOQ事实:从JPA批注到JOOQ表映射
- css居中的几种方法_CSS布局中的水平居中的方法
- android 自定义控件 焦点,Android 自定义Button按钮显示样式(正常、按下、获取焦点)...
- 失眠患者应该边工作边调理,还是辞职回家调理?
- 收费企业邮箱的好处-外贸企业优选
- 学python能赚钱吗-哪种Python程序员最赚钱?爬虫数据告诉你!
- YOLO3实现对自身数据集的训练-YOLO3代码学习资料
- cf914F. Substrings in a String(bitset 字符串匹配)
- 三维重建-摄像机模型+摄像机标定(上)
- 一根网线让两台笔记本对拷文件
- 嵌入式系统开发-麦子学院(12)——ARM Bootloader开发
- 轻盈潇洒卓然不群,敏捷编辑器Sublime text 4中文配置Python3开发运行代码环境(Win11+M1 mac)
- linux 域名判断 跳转,Nginx判断不同的域名指向不同的root路径实例
- 百万钱包借款时填资料一直显示服务器异常,百万钱包有连续放款失败,然后突然推过的吗?我已经失败四五...
- 计算机高中期末总结作文,高中期末总结:高一期末总结作文
- 机器学习--基础算法--机器学习基础
热门文章
- 关于win7快速启动栏以及显示桌面功能的还原
- 【概率论】6-4:分布连续性修正(The Correction for Continuity)
- TPP-Fe(3+)四苯基卟啉铁cas16456-81-8性质说明
- java-注解-自定义注解-注解解析
- C++实现CS模型(计算机网络)
- Unity Spine 换装方案
- 为 Vue 项目添加 cnzz 统计
- 基于Python的SAP流程自动化
- The Top 5 cloud security threats presented by Mark Russinovich
- 如何使用Excel表格精准分析PT100温度阻值关系?