博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
relative、absolute和float
阅读量:6079 次
发布时间:2019-06-20

本文共 906 字,大约阅读时间需要 3 分钟。

 

  position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left、top、right、bottom和z-index属性。(默认这些属性未激活,设置了也无效)

  设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流。

  不同:

  position:relative会保留自己在z-index:0层的占位,left、top、right、bottom值是相对于自己在z-index层的位置。

  position:absolute会完全脱离文档流,不再z-index:0层保留占位符,其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的,如果祖先元素全都没有设置,那么就相对于body元素。

 

  float也能改变文档流,不同的是,float不会让元素浮到另一个元素上面,它仍然让元素在z-index:0层排列,只能通过float:left和float:right来控制元素在同一层里"左浮"和"右浮"。float会改变正常的文档流排列,影响周围元素。

 

  position:absolute和float会隐式的改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute和float中任何一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。就算显示的设置display:inline或者display:block,也仍然无效(IE6双倍边距BUG利用display:inline解决)。

  position:relative却不会隐式改变display类型。

 

http://i.cnblogs.com/EditPosts.aspx?opt=1

转载于:https://www.cnblogs.com/yangxiaoyanger/p/4047934.html

你可能感兴趣的文章
监视DNS服务器工作是否正常
查看>>
理解并取证:动态路由协议RIP的工作原理
查看>>
你也可以拥有F5
查看>>
Windows Server 2012 Release Candidate (RC发行预览版) Datacenter抢鲜看
查看>>
疯狂ios讲义之疯狂连连看游戏简介
查看>>
shell编程培训之shell的工作原理
查看>>
Linux环境变量配置介绍及实战
查看>>
【VMCloud云平台】SCCM (九)添加报表点
查看>>
有关puppet agent端三种备份恢复方案探讨研究
查看>>
Linux下/etc/fstab文件详解
查看>>
统一沟通-技巧-13-Lync-Polycom RMX 1500-配置
查看>>
WindowsServer 2008 R2 Active Directory PowerShell
查看>>
大数据虚拟化零起点-3基础运维第二步-安装vSphere 5.1
查看>>
App-V5.0服务器部署
查看>>
Gartner:2012年大数据HypeCycle
查看>>
Lync 小技巧-4-我是否应该用动态内存
查看>>
写给同事的一封信
查看>>
详解Kafka生产者Producer配置
查看>>
SQL Server 2012笔记分享-9:理解列存储索引
查看>>
基于2.8版本redis配置文件中文解释
查看>>