本文旨在普及一下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. 开源！js实现微信/QQ直接跳转到支付宝APP打开口令领红包！附：demo

    最近支付宝的领红包可真是刷爆了各个微信群啊,满群都是支付宝口令. 可是这样推广可不是办法,又要复制又要打开支付宝又要点领取,太麻烦了. 于是乎,提出了一个疑问!是否可以在微信里面点一个链接然后直接打开 ...

  2. BeanFactory和ApplicationContext的区别+部分Spring的使用

    BeanFactory和ApplicationContext的区别 ApplicationContext 方式加载:创建容器的同时 容器初始化,容器所有的bean创建完毕   Spring容器中获取一 ...

  3. pl/sql 过程 函数(写一个过程，输入部门编号，在控制台打印这个部门的名称，总人数，平均工资（基本工资+奖金）)

    1.编写过程,输入三角形三个表的长度.在控制台打印三角形的面积. create or replace procedure pro_s(v_a number,v_b number,v_c number) ...

  4. Java如何对一个对象进行深拷贝？

    在Java语言里,当我们需要拷贝一个对象时,有两种类型的拷贝:浅拷贝与深拷贝.浅拷贝只是拷贝了源对象的地址,所以源对象的值发生变化时,拷贝对象的值也会发生变化.而深拷贝则是拷贝了源对象的所有值,所以即 ...

  5. 导出Excel/Pdf/txt/json/XML/PNG/CSV/SQL/MS-Word/ Ms-Powerpoint/等通过tableExport.js插件来实现

    首先去我的云盘下载需要的js: 链接:https://pan.baidu.com/s/13vC-u92ulpx3RbljsuadWw 提取码:mo8m 页面代码: <!DOCTYPE html& ...

  6. 最详细React Native环境配置及项目初始化(2018-10-14)

    注意配环境一定要全程使用稳定VPN工具,否则会浪费大量时间!!!相信我 一.截止到项目初始化之前也就是执行这条命令之前都按官网的方法就可以 https://reactnative.cn/docs/ge ...

  7. struts2数据处理的几种方式

    package com.loaderman.c_data; import java.util.Map; import javax.servlet.ServletContext; import com. ...

  8. 网络通信框架之volley

    介绍 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行HTTP通信,Htt ...

  9. Json+Ajax相关

    Ajax前戏之json: 1.什么是json? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 2.json对象和JavaScript ...

  10. 阶段3 3.SpringMVC·_06.异常处理及拦截器_7 SpringMVC拦截器之拦截器接口方法演示

    返回值改成false 就是不放行 没有方形,控制台只有一个输出 转发到error页面 新建error.jsp页面 控制台只有拦截器的输出.controller根本就没有执行 把代码改回来 重写第二个方 ...