关于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. PS 如何制作Vista的毛玻璃效果

    1 对一个图像的任意一部分新建一个选区   2 对选中区域进行高斯模糊,大小为5像素   3 再次新建一个图层,填充为深蓝色(#E9E7E3),填充为10%-15%.高斯模糊0.5像素.   4 再对 ...

  2. MPTCP 源码分析(一) MPTCP的三次握手

    简述:      MPTCP依然按照正常的TCP进行三次握手,只是在握手过程中增加了MPTCP特有的信息.   建立过程      三次握手过程如下图所示: 左边客户端发送的第一个SYN包携带有客户端 ...

  3. 【转载】json对象的使用

    使用JSON 进行数据传输 一.选择的意义 在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式.为了更好的使用ajax, 我们将学习一种有用的数据格式 JavaScript O ...

  4. mybatis like写法

    name like concat(concat('%',#{name}),'%') name like concat('%',#{name},'%')

  5. javascript 设计模式 -- 发布/订阅模式

    直接上代码: index.html : <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. URAL 1984. Dummy Guy(数学啊)

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1984 1984. Dummy Guy Time limit: 0.5 second Me ...

  7. zabbix web monitoring 监控网页

    配置 Web 场景 配置 web 场景: 转到: 配置 (Configuration)–>主机 (或者 模板 ) 点击主机 (host)/ 模板 (template) 行中的 Web 点击右上角 ...

  8. 谈谈WEB开发中的苦大难字符集问题

    http://www.lanceyan.com/tech/arch/web_luanma.html记得刚做javaweb开发的时候被这个编码问题搞得晕头转向,经常稀里糊涂的编码正常了一会编码又乱了.那 ...

  9. IBM Rational Appscan使用之扫描结果分析

    转自:http://www.nxadmin.com/penetration/825.html 之前有IBM Rational Appscan使用详细说明的一篇文章,主要是针对扫描过程中配置设置等.本文 ...

  10. HDU 5294 Tricks Device (最大流+最短路)

    题目链接:HDU 5294 Tricks Device 题意:n个点,m条边.而且一个人从1走到n仅仅会走1到n的最短路径.问至少破坏几条边使原图的最短路不存在.最多破坏几条边使原图的最短路劲仍存在 ...