本文旨在普及一下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. 【编程漫谈】用JAVA画多边形

    一门语言只要带图形库就可以编程画图了,用JAVA画图有两种方式,一是在内存中画好然后生成图片,就可以看到画图的效果了.另一个就是在窗口界面上直接画,可以实时看到程序的运行效果.刚开始学编程的时候,我加 ...

  2. 交易算法[z]

    http://stanford.edu/class/msande448/2019/Final_presentations/ http://stanford.edu/class/msande448/20 ...

  3. 使用sql developer 导出Oracle数据库中的表结构

    MS SQLServer的客户端工具做的的确比较好,直接右键,导出数据库就OK了,而且MS的客户端导出的是xxx.dbf文件,直接附加到别的数据库上就OK了 Oracle的sql developer就 ...

  4. 阶段3 3.SpringMVC·_07.SSM整合案例_04.ssm整合之编写SpringMVC框架

    搭建SpringMvc的环境, 首先是提供前端控制器 再配置serletMapping 加载Springmvc.xml的配置文件, 使用init-param里面有个属性contextConfigLoc ...

  5. 12 mysql性能抖动

    12 mysql性能抖动 sql语句为什么变”慢”了 在介绍WAL机制时,innodb在处理更新语句的时候,只做了写日志这一个磁盘操作,就是redo log,在更新内存写完redo log之后,就返回 ...

  6. 自动添加 ssh key 到远程主机的脚本,应用sshpass和ssh-copy-id

    USERNAME=$ PASSWORD=$ HOST=$ if [ "$3" = "" ]; then echo "Missing parameter ...

  7. pm2 代替 Supervisor 管理进程

    前提 我们在使用 Laravel 的时候不免用到列队来处理任务,而 Laravel 官方文档给出的是 Supervisor 来管理进程和监控.但是我们在使用中有下面几个缺点: Supervisor 单 ...

  8. 分片式图片服务器fastDFS安装过程

    1. 什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制, 充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标, ...

  9. svn修改代码URL整合路径

    我们平常开发的代码都是在A服务器上整合的,最近A服务器突然无法访问了,所以今天我们更换了一下服务器.svn如何安装的就不说了,这里只介绍一下如何更换SVN URL的. 在你拿到URL后,在工作文件夹下 ...

  10. windows 环境安装K8s

    文档地址: https://yq.aliyun.com/articles/508460?spm=a2c4e.11153940.blogcont221687.18.7dd57733hFolMo Dock ...