position 有三个值,static(静态)、relative(相对)、absolute(绝对);由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。对于后两者,一般应用:在一个相对定位的元素里面放置一个绝对定位的元素,如图: 子元素B可以通过top、right、bottom、left来精确定位,定位的参考目标就是其具有相对定位属性的父级元素A;并且设置这些偏移后,产生的空隙会被后面的元素填充(如果后面的元素足够尺寸的话)。由于B元素具有absolute定位属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,为解决这个竞争,就产生了 z-index(空间坐标系的Z轴) 属性,谁的值大,谁就在上面。另外,如果父级元素A没有设置relative,那么B元素就会以body标签当作参考点。 对于具有position:relative属性的元素A,其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点,而不是像上面说的,以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙,其周围的元素并不会填充这些空隙,即使它们足够尺寸(演示)。
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Position:relative </TITLE> <style type="text/css"> ul { list-style-type:none; height:300px;margin:0px; width:300px} li { width:100px; text-align:center; float:left;height:100px; line-height:100px} #position { width:40px} .csstext { padding:6px; background-color:#ccc;border:1px solid #999; margin:10px 0px; height:auto; line-height:20px; color:blue} </style> <script> function po(){ document.getElementById('testid').style.position='relative'; // document.getElementById("testid").style.filter="Alpha(Opacity=80)"; } function done(){ document.form1.disabled = true; document.getElementById("csstext").className = "csstext"; document.getElementById("csstext").innerHTML = document.getElementById("testid").style.cssText.replace(/;/g,";<br>").toLowerCase(); } </script> </HEAD> <BODY> <h1>position:relative</h1> <ul> <li style="background-color:#eee;">1</li> <li style="background-color:#ccc;">2</li> <li style="background-color:#999;">3</li> <li style="background-color:#666;">4</li> <li style="background-color:#f30;" id="testid">5</li> <li style="background-color:#ccc;">6</li> <li style="background-color:#999;">7</li> <li style="background-color:#666;">8</li> <li style="background-color:#eee;">9</li> </ul> <form name="form1"> <p> <input type="button" value="top=70px;" οnclick="po();document.getElementById('testid').style.top='70px';done()"> <input type="button" value="right=70px;" οnclick="po();document.getElementById('testid').style.right='70px';done()"> <input type="button" value="bottom=70px;" οnclick="po();document.getElementById('testid').style.bottom='70px';done()"> <input type="button" value="left=70px;" οnclick="po();document.getElementById('testid').style.left='70px';done()"> </p> </form> <input type="button" value="refresh" οnclick="location.reload()"> <p> <div id="csstext"></div> </p> </BODY> </HTML>
值得注意的是,此时元素A的margin,margin将作用于该元素的原来位置,由于原位置产生偏移,该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置,并且其周围元素的位置也将产生影响。 回过头来再看看 relative 里面的 absolute,比如上面的A、B两个元素,如果两个元素都设置了top、right、bottom、left,对于元素B来说,其位置偏移的参考点是元素A偏移后的位置,不是元素A的原位置,同样,如果元素B有margin,其参考点也是元素A偏移后的位置,这点很重要,这才是absolute的概念(演示)。
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Position:absolute </TITLE> <style type="text/css"> ul { list-style-type:none; height:300px;margin:0px; width:300px} li { width:100px; text-align:center; float:left;height:100px; line-height:100px} #position { width:40px} .csstext { padding:6px; background-color:#ccc;border:1px solid #999; margin:10px 0px; height:auto; line-height:20px; color:blue} #testid {position:relative} </style> <script> function po(){ document.getElementById('testid').style.position='relative'; } function done(){ document.getElementById("csstext").innerHTML = document.getElementById("testid").style.cssText.replace(/;/g,";<br>").toLowerCase(); document.getElementById("csstext2").innerHTML = document.getElementById("absolute").style.cssText.replace(/;/g,";<br>").toLowerCase(); } </script> </HEAD> <BODY οnlοad="done()"> <h1>position:absolute</h1> <ul> <li style="background-color:#eee;">1</li> <li style="background-color:#ccc;">2</li> <li style="background-color:#999;">3</li> <li style="background-color:#666;">4</li> <li style="background-color:#f30;" id="testid"><div style="position:absolute;top:-70px;" id="absolute">5</div></li> <li style="background-color:#ccc;">6</li> <li style="background-color:#999;">7</li> <li style="background-color:#666;">8</li> <li style="background-color:#eee;">9</li> </ul> <form name="form1"> <p> <input type="button" value="move" οnclick="po();document.getElementById('testid').style.top='70px';done()"> </p> </form> <input type="button" value="refresh" οnclick="location.reload()"> <p> 中间红色的方块为元素A,A里面的数字5为元素B<br /><br /> 元素A当前的cssText: <div id="csstext" class="csstext"></div> 元素B当前的cssText: <div id="csstext2" class="csstext"></div> </p> </BODY> </HTML>
理解position:relative 与 position:absolute相关推荐
- 深入理解position:relative 与 position:absolute(divb相对于diva进行绝对定位)
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
- {转摘}理解 position:relative 与 position:absolute
转载:<a href="http://www.happyshow.org/article/125.html" target="_blank"> po ...
- 区分position:relative; position:absolute; position:fixed
区分position:relative; position:absolute; position:fixed 对于position:relative; position:absolute; posit ...
- position:relative 与 position:absolute
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
- position:relative与position:absolute的定位区别
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
- position:ablosute和position:relative的简单理解
##position:ablosute和position:relative的简单理解 ## 先看一下两者的定义: relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top ...
- 微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
- position属性:绝对定位position: absolute;相对定位 position: relative;固定定位 position: fixed;
position 属性: position常见的定位模式: 定位模式 描述 是否脱离文档流 移动模式 定位偏移属性 static 默认属性 对象遵循常规流 不移动 不移动 relative 相对定位 ...
- CSS中的position:relative理解
今晚来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为三种情况进行说明 包含关系:父级absolute,子级relative: 包含关系 ...
- CSS 元素的定位之相对定位 position: relative
在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原 ...
最新文章
- python的难点_汇总Python初学者常见的学习难点
- 0317复利计算3.0
- eclipse build path 以及 clean(转)
- pymysql连接mysql_python使用MYSQL数据库
- 互动直播的技术细节和解决方案实践经验谈
- mysql函数未定义_未定义的函数,MYSQL错误
- C语言学习笔记---字符串对比函数strspn()和strcspn()函数
- 企业级数据服务的一点感受
- 互联网科普-淘宝与天猫的对标
- android sdk根目录,Android SDK位置
- Windows 10中检查已安装编解码器的几个方法
- cc2530 按键唤醒功耗模式PM3例程
- 身份证某几位用*代替
- 微信小程序实现讯飞语音合成
- 伦敦大学国王学院 计算机phd,重磅!伦敦国王学院全奖博士录取一枚!
- 直击AWE2018:当AI遇见LED,诸葛小明给光更多可能
- 服务器虚拟机uefi,为虚拟机启用或禁用 UEFI 安全引导
- VScode终端配置bash.git(默认),terminal.integrated.shell:windows路径查找不到前提下
- 智库献策大数据时代食品安全
- oracle生僻字解决方案
热门文章
- 【车间调度】基于matlab遗传算法求解置换流水车间调度问题【含Matalb源码 176期】
- 【数字信号处理】基于matlab数字信号软阈值+硬阈值+改进阈值小波去噪【含Matlab源码 068期】
- mysql 修改字段为主键自增_「MySQL整理」 MySQL语法,如何操作数据表
- 安装torchsnooper、convokit、entmax库
- narwal无法连接机器人_知了连接型智能营销机器人——重新定义AI客服
- centos7 防火墙_【Linux简单实用小命令001】CentOS 7、8的防火墙端口开放
- U盘插入电脑有明显的响声但是不显示盘符
- 从入门到放弃之promise用法(上)
- SpringBoot(九):fastjson、异常处理
- tomcat、redis session共存配置