认识绝对定位,相对定位

栏目: Html · 发布时间: 5年前

内容简介:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物为改变参照物(橘色框)后的效果

<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

认识绝对定位,相对定位

为改变参照物(橘色框)后的效果

层级关系为:

<div ——————————— position:relative;最近的祖先定位元素,参照物

<div—————————-没有设置为定位元素,不是参照物

<div———————-没有设置为定位元素,不是参照物

<div box1

<div box2 ——–position:absolute; top:50px; left:120px;

<div box3

效果图:

认识绝对定位,相对定位

参照物为最顶级的元素情况。

层级关系为:

<div ———————————没有设置为定位元素,不是参照物

<div—————————-没有设置为定位元素,不是参照物

<div———————-没有设置为定位元素,不是参照物

<div box1

<div box2 ——–position:absolute; top:50px; left:120px;

<div box3

效果图:

认识绝对定位,相对定位

仅使用margin属性布局绝对定位元素的情况

此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。

图9中,使用margin属性布局相对定位元素。

层级关系为:

<div ——————————— position:relative; 不是参照物

<div—————————-没有设置为定位元素,不是参照物

<div———————-没有设置为定位元素,不是参照物

<div box1

<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;

<div box3

效果图:

认识绝对定位,相对定位

IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。

层级关系为:

<div ——————————— position:relative; 不是参照物

<div—————————-没有设置为定位元素,不是参照物

<div———————-没有设置为定位元素,不是参照物

<div box1

<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;

<div box3

效果图:

认识绝对定位,相对定位

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/24710.html

认识绝对定位,相对定位

认识绝对定位,相对定位 微信打赏

认识绝对定位,相对定位 支付宝打赏

感谢您对作者Willis的打赏,我们会更加努力!    如果您想成为作者,请点我


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大话存储

大话存储

张冬 / 清华大学出版社 / 2008-11 / 58.00元

网络存储,是近二十年来的新兴行业。从纸带到硬盘再到大型磁盘阵列,存储系统经历了从简单到复杂,从单块硬盘到存储区域网络(SAN)。网络存储行业目前已经是一个步入正轨的IT行业了。. 网络存储是一个涉及计算机硬件以及网络协议/技术、操作系统以及专业软件等各方面综合知识的领域。目前国内阐述网络存储的书籍少之又少,大部分是国外作品,对存储系统底层细节的描述不够深入,加之术语太多,初学者很难真正理解网......一起来看看 《大话存储》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试