css position: relative,absolute具体解释
关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解。以下说说个人的理解:
语法:
position: relative | absolute
- relative:
- 对象遵循常规流,而且參照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的不论什么元素。
- absolute:
- 对象脱离常规流。使用top。right。bottom。left等属性进行绝对定位。盒子的偏移位置不影响常规流中的不论什么元素,其margin不与其它不论什么margin折叠。
说明:
当设定position: relative时,是相对于自己来定位。(即相当于当前位置移动)
当设定position: absolute时,是相对于父级来定位的,没有父级相对于body定位。
备注:position: absolute时。left,right。top,bottom至少指定其一,对象可层叠。层叠通过z-index属性定义。
position: relative时对象不可层叠
css position: relative,absolute具体解释的更多相关文章
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- css position: relative | absolute | static | fixed详解
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- CSS 定位 relative && absolute 问题?
1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- css position static | absolute | fixed | relative
<div id="bigbox1"> <div id="box1" class="box">box1</ ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- css - position relative与display table-cell深入分析
在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...
- css position relative obsolution
层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...
随机推荐
- 【ecshop---新增包邮卡功能】
一:需求分析 项目组要求新增类似虚拟卡的包邮卡,用户获得包邮卡的方式包括后台发送和前台自助充值.包邮卡有使用期限.订单使用包邮卡免除邮费.可以和其他优惠活动同时进行! 二:开发功能点 后台:新增包邮卡 ...
- autoRelease
cocos2dx采用的是引用计数的方式来管理对象的持有和释放. 所谓引用计数就是说,每个对象都会有一个属性用来记录当前被几个地方引用了.在释放内存的时候会根据这个引用计数来确定是否要用delete操作 ...
- python ——单下划线(约定)
命名规则: 通常使用小写单词,必要时用下划线分隔增加可读性. 使用一个前导下划线仅用于不打算作为类的公共接口的内部方法和实例变量. Python不强制要求这样; 它取决于程序员是否遵守这个约定. 使用 ...
- 訪问控制 protected, public, private 对照
OOP 3大特性:数据抽象,继承,动态绑定 3中訪问标号 protected, public, private 对照 用类进行数据抽象:用继承类继承基类的成员,实现继承.通过将基类对应函数声明为vir ...
- maven生成jar包
改了部分cas源码,想重新生成jar包,只好试着脱离eclipse,学了一下maven打jar包的命令,记录如下: 1.首先下载maven (请注意自己的jdk版本,如果使用maven2建议使用jdk ...
- mongoDB: cursor not found on server
查询mongoDB集合数据更新,数据有400w多.我一次用cursor(游标)取1w,处理更新.程序在某段时间运行中遍历游标时发生异常! DBCursor cursor = tabColl.find( ...
- RAD Studio XE8 技术研讨会讲义与范例程序下载
感谢各位程序猿亲临现场參加我们的公布会,现奉上会议当天的讲义与范例程序供大家參考: 2015/5/25~27北京.深圳 『RAD Studio XE8技术研讨会』 下载讲义:http://pan ...
- 关于javaSocket中 Software caused connection abort: recv failed问题
在学习Socket中今天突然遇到了以下这种问题 原来是网路连接出了问题,由于我測试的是远程连接所以是在学校的局域网下,结果非常不稳定,開始还以为怎么了一会连上了一会又出现故障然后把IP地址改为本机的1 ...
- Spring 中的Null-Safety
之前一直在某些代码中看到过使用@Nullable 标注过的注释,当时也没有在意到底是什么意思,所以这篇文章来谈谈Spring中关于Null的那些事. 在Java中不允许让你使用类型表示其null的安全 ...
- hdu 4112 Break the Chocolate(乱搞题)
题意:要把一块n*m*k的巧克力分成1*1*1的单元,有两种操作方式:1,用手掰(假设力量无穷大),每次拿起一块,掰成两块小的:2,用刀切(假设刀无限长),可以把多块摆在一起,同时切开.问两种方式各需 ...