认识绝对定位,相对定位

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


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

查看所有标签

猜你喜欢:

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

Algorithms + Data Structures = Programs

Algorithms + Data Structures = Programs

Niklaus Wirth / Prentice Hall / 1975-11-11 / GBP 84.95

It might seem completely dated with all its examples written in the now outmoded Pascal programming language (well, unless you are one of those Delphi zealot trying to resist to the Java/.NET dominanc......一起来看看 《Algorithms + Data Structures = Programs》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

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

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具