关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解。以下说说个人的理解:

语法:

position: relative | absolute

relative:
对象遵循常规流,而且參照自身在常规流中的位置通过toprightbottomleft属性进行偏移时不影响常规流中的不论什么元素。
absolute:
对象脱离常规流。使用toprightbottomleft等属性进行绝对定位。盒子的偏移位置不影响常规流中的不论什么元素,其margin不与其它不论什么margin折叠。

说明:

当设定position: relative时,是相对于自己来定位。(即相当于当前位置移动)

当设定position: absolute时,是相对于父级来定位的,没有父级相对于body定位。

备注:position: absolute时。leftrighttopbottom至少指定其一,对象可层叠。层叠通过z-index属性定义。

position: relative时对象不可层叠

css position: relative,absolute具体解释的更多相关文章

  1. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  2. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  3. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  4. CSS 定位 relative && absolute 问题?

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  5. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  6. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  7. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  8. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  9. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

随机推荐

  1. mac os x+paralles使用source insight

    将Mac OS X下的目录共享到Paralles后,source insight创建工程.但是当再次打开时却打开失败.提示:there was an error opening project 网上对 ...

  2. 在项目中引用android.support.v7

    在Android开发中,新建的项目可能因为缺少对sopport工程的引用而报错,可以这样解决. 1.项目右键 --> import --> Android --> Existing ...

  3. RFS 理解

    1.背景 网卡接收一个数据包的情况下,会经过三个阶段:   - 网卡产生硬件中断通知CPU有包到达 - 通过软中断处理此数据包 - 在用户态程序处理此数据包   在SMP体系下,这三个阶段有可能在3个 ...

  4. iOS开发 最近开发了蓝牙模块,在此记录总结一下(转载)

    1.基本概念 <1>中心者模式:常用的(其实99.99%)就是使用中心者模式作为开发,就是我们手机作为主机,连接蓝牙外设.由于开发只用到了中心者模式,所以我也只介绍中心者模式. <2 ...

  5. django book学习问题记录

    —————————————————————————————————— 位置:第五章<模型> 问题描述(已解决): >>> p1 = Publisher.objects.c ...

  6. STL学习笔记(迭代器相关辅助函数)

    advance()可令迭代器前进 #include <iterator> void advance(InputIterator& pos,Dist n); 面对Random Acc ...

  7. Volatile 多线程中用到的关键字

    前言 不管是在面试还是实际开发中 volatile 都是一个应该掌握的技能. 首先来看看为什么会出现这个关键字. 内存可见性 由于 Java 内存模型(JMM)规定,所有的变量都存放在主内存中,而每个 ...

  8. @Autowired @Transaction @Service同时出现。

    对于@Autowired,如果只写这些,肯定是根据类型自动装配这个没问题. @Service public class AcRoleServiceImpl implements AcRoleServi ...

  9. Linux系统防CC攻击自动拉黑IP增强版Shell脚本 《Linux系统防CC攻击自动拉黑IP增强版Shell脚本》来自张戈博客

    前天没事写了一个防CC攻击的Shell脚本,没想到这么快就要用上了,原因是因为360网站卫士的缓存黑名单突然无法过滤后台,导致WordPress无法登录!虽然,可以通过修改本地hosts文件来解决这个 ...

  10. Android加入新的视频格式--媒体库扫描

    需求:在mediaprovider数据库中加入.mov后缀格式的视频文件 能够使用工具MediaInfo_GUI_0.7.67_Windows.3243836749.exe 查看mov文件编码格式类型 ...