关于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. Laravel创建项目和安装PHPStorm IDE插件

    一.win10下安装composer1.下载composer.phar,放入php的安装目录https://getcomposer.org/download/1.4.2/composer.phar 2 ...

  2. ES7新特性

    Array.prototype.includes Array.prototype.includes用法都容易和简单.它是一个替代indexOf,开发人员用来检查数组中是否存在值,indexOf是一种尴 ...

  3. ES6 动态计算属性名

    在ES5之前,如果属性名是个变量或者需要动态计算,则只能通过 对象.[变量名] 的方式去访问. <script type="text/javascript"> var ...

  4. 小猪的Git使用总结

    小猪的Git使用总结 文件夹 小猪的Git使用总结 安装配置与文档 下载安装 文档教程相关 概念 Git的四个组成部分 文件的几个状态 Git与SVN版本号版本号控制存储差异 每次Commit时仓库中 ...

  5. Mac环境下反编译apk

    0,工具汇总 我们反编译apk主要使用下面三个工具 apktool:用于获取资源文件 dex2jar:获取源文件jar包 JD-GUI:反编译源文件jar包查看源码 找这些工具时折腾了我点时间.如今把 ...

  6. 【Datastage】Datastage在win10上安装报错:This Application requires one of the following versions of the .NET Framework:v1.1.4322 Do you want to install this .NET Framework version now?

    Datastage在win10上安装报错如下: 这个错误的意思是:.netFramWork的版本不符合要求,于是,我在网上下载了一个版本一致的 下载地址为:http://pan.baidu.com/s ...

  7. VM里面的桥接

      今天我们谈一谈桥接模式,一般的时候,我用的是NAT模式,需要设置另一个虚拟网卡的IP地址,而不是借助本机的物理网卡.   编辑---虚拟网络编辑器 有些时候直接设置桥接到某个网卡可能会不成功,我们 ...

  8. Linux Mint (应用软件— 虚拟机:Virtualbox)

    近期想自己折腾一下Linux系统本身.比方Linux裁减或者移植.裁减或者移植Linux是一件麻烦的事情.而且出错后会影响到当前的系统.怎样才干不影响当前机器上的系统呢,于是便想到了虚拟机.在当前系统 ...

  9. Linux系统下如何监测磁盘的使用空间

    不管是我们在安装软件还是监测软件的使用性能,我们都要随时掌握系统磁盘的使用情况. 使用df命令 df df命令用于显示磁盘分区上的可使用的磁盘空间.默认显示单位为KB.可以利用该命令来获取硬盘被占用了 ...

  10. HTML_<a>

    1.在a标签中调用js函数最适当的方法推荐使用: (1) a href="javascript:void(0);" onclick="js_method()" ...