认识绝对定位,相对定位

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

内容简介:<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的打赏,我们会更加努力!    如果您想成为作者,请点我


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

查看所有标签

猜你喜欢:

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

傅立叶分析导论

傅立叶分析导论

斯坦恩 (Elias M. Stein)、Rami Shakarchi / 世界图书出版公司北京公司 / 2013-1-1 / 59.00元

傅立叶分析导论,ISBN:9787510040559,作者:Elias M·Stein,Rami Shakarchi 著一起来看看 《傅立叶分析导论》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具