认识绝对定位,相对定位

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


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

查看所有标签

猜你喜欢:

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

CSS精粹

CSS精粹

Rachel Andrew / 曹明伦 / 人民邮电出版社 / 2007-10 / 39.00元

本书采用问答的形式,为CSS使用过程中一些有价值的经典问题提供了精彩的实践解决方案。本书内容包括文本样式、CSS图像、导航、表格数据、注册表和用户界面、浏览器和设置支持、CSS定位和布局以及未来相关技术。 本书的目标读者是每一个需要使作CSS的Web设计人员和开发人员。本书通过经典的问题和精彩的解答将理论融于实践,使每一个带着问题阅读本书的读者都能找到自己满意的答案。一起来看看 《CSS精粹》 这本书的介绍吧!

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

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

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

RGB CMYK 互转工具