关于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. [ElasticSearch]Java API 之 词条查询(Term Level Query)

    1. 词条查询(Term Query)  词条查询是ElasticSearch的一个简单查询.它仅匹配在给定字段中含有该词条的文档,而且是确切的.未经分析的词条.term 查询 会查找我们设定的准确值 ...

  2. [Angular] Debug Angular apps in production without revealing source maps

    Source: https://blog.angularindepth.com/debug-angular-apps-in-production-without-revealing-source-ma ...

  3. Android Tabhost置于底部

    方法一: <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id=&qu ...

  4. Windows / Linux 一件编译zlib库

    一. 下载zlib库 : http://www.zlib.net 本文以  zlib-.tar.xz  为例 二. 解压文件得到 zlib- 文件夹,修改 zlib-/CMakeLists.txt 文 ...

  5. Java 实例

    Java 实例 本章节我们将为大家介绍 Java 常用的实例,通过实例学习我们可以更快的掌握 Java 的应用. Java 环境设置实例 Java 实例 – 如何编译一个Java 文件? Java 实 ...

  6. CCF计算机职业资格认证 2015年3月第2题 数字排序 解法和思路

    问题描写叙述 给定n个整数,请统计出每一个整数出现的次数.按出现次数从多到少的顺序输出. 输入格式 输入的第一行包括一个整数n,表示给定数字的个数. 第二行包括n个整数.相邻的整数之间用一个空格分隔, ...

  7. 将apache添加到服务

    拿apache为例 1.将应用程序放在PATH的任一个目录下,一般放在/usr/sbin/.执行下面命令 cp /usr/local/apache2/bin/httpd /usr/sbin/httpd ...

  8. UVA - 434 Matty&#39;s Blocks

    题意:给你正视和側视图,求最多多少个,最少多少个 思路:贪心的思想.求最少的时候:由于能够想象着移动,尽量让两个视图的重叠.所以我们统计每一个视图不同高度的个数.然后计算.至于的话.就是每次拿正视图的 ...

  9. A股市场底部顶部历史数据

    1. A股市场平均市盈率 大顶沪市平均市盈率:66-70倍. A股市场2次大底沪市平均市盈率:12倍-15倍. 大底时的例子. 2005年6月6日上证指数1000点时的14倍市盈率.2008年10月2 ...

  10. php数组操作,内容相同,键值不同,互换

    $title = array("A"=>"创建时间","C"=>"商品信息","D"=& ...