本文旨在普及一下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. kafka 性能测试脚本

    [参考文章]:Kafka自带的性能测试脚本 1. 生产消息压测脚本 1.1 脚本及参数 bin/kafka-producer-perf-test.sh  --topic kafka-test-0 -- ...

  2. Ubuntu——配置JDK

    在Ubuntu下配置JDK环境 检查是否已经安装了JDK,执行以下命令: java -v 如果出现以下内容则说明没有安装: 程序 'java' 已包含在下列软件包中: * default-jre * ...

  3. php改变header头返回值

    $code = '400 Bad Request'; header('HTTP/1.1 '.$code);

  4. java 包引入时*会全部加载吗

    有一个虚拟机参数: -XX:+TraceClassLoading 这两种写法,最终加载的类是一样的. 对比了一下输出的都是618行

  5. 开源缓存框架之ASimpleCache

    ASimpleCache 是一个为android制定的 轻量级的 开源缓存框架.轻量到只有一个java文件(由十几个类精简而来). 1.它可以缓存什么东西? 普通的字符串.JsonObject.Jso ...

  6. 六十九：flask上下文之线程隔离的g对象的使用

    保存全局对象的g对象g对象是在整个flask应用运行期间都是可以使用的,并且也是和request一样,是线程隔离的,这个对象是专门用来存放开发者自己定义的一些数据,方便在整个flask程序中都可以使用 ...

  7. Eclipse 设置护眼背景色

    Eclipse 设置护眼背景色 1.设置字体大小 Window --> Preferences --> General --> Apprearance --> Colors a ...

  8. elasticsearch-head-master下运行npm install报npm WARN elasticsearch-head@0.0.0 license should be a valid SPDX license expression

    2个月没有启动es和es配套服务,今天运行时,发现如下问题: 运行npm install 出现npm WARN elasticsearch-head@0.0.0 license should be a ...

  9. LCTF (easyeasy-200)

    首先安装,看看app是什么样的. 有点奇怪,没有点击确定的按钮.然后拖到JEB反编译. 要求输入的字符串的长度要在35-39之间(包括边界值),然后会调用Format().form函数.如下图. 可以 ...

  10. PHP define defined const

    define 定义常量,常量一旦被定义,在脚本执行期间就不能再改变或者取消定义 常量默认大小写敏感.通常常量标识符总是大写的 与变量的区别: 1.常量前面没有美元符号($) 2.常量只能通过defin ...