本文旨在普及一下position的用法，CSS中position的使用率相当之高，对于新入行的小白，不仅要知其然，还要知其所以然。

position（定位类型），主要有4种属性值 : static、fixed、relative、absolute，任何元素的默认position属性值都是static（静态）。元素可以使用TRBL定位，但必须先设定position属性，否则无法发挥效果。根据不同的position属性值，TRBL作用不同。

下面是各个属性值的简单介绍：

  1. static，为position的默认属性值，即没有定位，元素出现在正常的流中，静态定位的元素不会受到top, bottom, left, right影响。
  2. fixed：元素位于浏览器窗口固定位置，即使窗口滚动也不会移动；Fixed定位使元素位置脱离文档流，因此不占据空间；Fixed定位的元素可以和其他元素重叠。
  3. absolute（绝对定位）：其元素位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>即浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位；
  4. relative（相对定位）：是相对于元素的正常位置，配合TRBL进行定位。相对定位时存在元素重叠现象，但原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

 absolute（绝对定位详解）：

  • 绝对定位使元素可以放在页面上的任何位置，元素位置与文档流无关，因此不占据空间;如果两个定位元素重叠，没有指定z - index(设置元素的堆叠顺序)，最后定位在HTML代码中的元素将被显示在最前面。

绝对定位可能出现的情况：

        若父级没有设定position属性或没有父级元素：

（1）没有TRBL--->以浏览器左上角原点，若存在文本则以它前面的最后一个文字的右上 角为原点进行定位但是不断开文字，覆盖于上方。

（2）设定TRBL--->以浏览器左上角原点进行定位，位置将由TRBL决定。

若父级设置了position属性(无论是absolute还是relative)：

（1） 没有TRBL--->以父级的左上角为原点

（2） 设定TRBL--->以父级的左上角为原点进行定位，位置由TRBL决定，父级的padding对其无影响

小结1：若想把一元素在其父级元素中绝对定位，需满足两个条件：1.设定TRBL 2.父级设定Position属性

这个总结可以保证你在用绝对定位布局页面的时候，不会错位，页面不会随着浏览器的大小或者显示器分辨率的大小而改变。只要有一点不满足，元素就会以浏览器左上角为原点，这就是初学者容易犯错的一点。

小结2：若用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding属性的影响。

相对定位可能出现的情况：

    若父级没有设定position属性或没有父级元素：

（1）没有TRBL--->以浏览器左上角为原点，若存在文本，则以文本的底部为原始点进行定位并将文字断开

（2）设定TRBL--->以父级的左上角为原点进行定位

若父级设置了position属性(无论是absolute还是relative)：

（1）没有TRBL--->以父级的左上角为原点进行定位

（2）设定TRBL--->以父级的左上角为原点进行定位，位置由TRBL决定。如果父级有Padding属性，则以内容区域的左上角为原点，进行定位

小结3：相对定位时无论父级存在不存在，无论有没有TRBL，均是以父级或浏览器的左上角进行定位，但是父级的Padding属性会对其影响。

小结4：可以将position属性为relative的DIV视成可以用TRBL进行定位的的普通DIV，或者说只要将我们平时布局页面的div的CSS属性中加上position:relative后，就不仅可以用float布局页面，还可以用TRBL进行布局页面了，但position属性为absolute不可以用来布局页面，因为如果用来布局的话，所有的DIV都相对于浏览器的左上角定位了，所以只能用于将某个元素定位于属性为relative的元素的内部某个位置。

总结：

  • relative属性可以用来布局页面，absolute属性配合TRBL用来定位某元素在父级中的位置，
  • 若用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响。

http://www.runoob.com/css/css-positioning.html

 

position详解的更多相关文章

  1. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  2. [TimLinux] CSS float和position详解

    1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...

  3. Kooboo CMS - Html.FrontHtml.Position 详解

    DataContract 数据契约 http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html https://msdn.micr ...

  4. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  5. CSS中position详解与常见应用实现

    在web前台开发时候,我们必不可少的会用到postion属性进行布局定位.今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在CS ...

  6. CSS定位之position详解(转载)

    本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html  position属性 在前端中,position是很常见的属性.通过这 ...

  7. 定位position详解:relative与absolute

    定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...

  8. CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...

  9. Position详解---转

    position有四个属性值: relative absolute fixed static 下面分别讲述这四个属性. 1. relative relative属性,相对定位,我们要搞清它是相对哪个对 ...

随机推荐

  1. Nginx事件管理之事件处理流程

    1. 概述 事件处理要解决的两个问题: "惊群" 问题,即多个 worker 子进程监听相同端口时,在 accept 建立新连接时会有争抢,引发不必要的上下文切换, 增加系统开销. ...

  2. javascript之for-in语句

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 从GoogleClusterData统计每个用户的使用率、平均每次出价

    之前将google cluster data导入了Azure上的MySQL数据库,下一步就是对这些数据进行分析, 挖掘用户的使用规律了. 首先,为了加快执行速度,对user,time等加入索引. 然后 ...

  4. Systemd 指令

    Systemd 指令 原文:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 一.由来 历史上,Linux 的 ...

  5. flutter vscode 小插件

    dart flutter Awesome Flutter Snippets Bracket Pair Colorizer

  6. Angularjs E2E test Report/CoverageReport

    前端Angularjs是一个很热门的框架,这篇是学习基于Angularjs的nodejs平台的E2E测试报告和E2E JS覆盖率报告.用到的都是现有的工具,只是一些配置的地方需要注意. 环境前提: 1 ...

  7. 內部作业 OH01 0001710000 无价格可确定

    在CO15报工时,提示:“內部作業 OH01 0001710000 無價格可確定” 出现以上错误信息,表示没有在KP26维护价格, 只需要进入KP26维护成本中心和作业类型的价格即可, 具体操作如下图 ...

  8. EncryptHelper加密对象-工具类

    using System; using System.IO; using System.Security.Cryptography; using System.Text; using System.W ...

  9. CDC类介绍

    CDC类 中文介绍 CDC类定义的是设备上下文对象的类. CDC对象提供处理显示器或打印机等设备上下文的成员函数,以及处理与窗口客户区对应的显示上下文的成员. 通过CDC对象的成员函数进行所有的绘图. ...

  10. DDoS攻击的几种类型

    DDoS攻击的几种类型   随着网络攻击的简单化,如今DDoS攻击已经不止出现在大型网站中,就连很多中小型网站甚至是个人网站往往都可能面临着被DDoS攻击的的风险.或许很多站长对DDoS攻击并不是很了 ...