position详解
本文旨在普及一下position的用法，CSS中position的使用率相当之高，对于新入行的小白，不仅要知其然，还要知其所以然。
position（定位类型），主要有4种属性值 : static、fixed、relative、absolute，任何元素的默认position属性值都是static（静态）。元素可以使用TRBL定位，但必须先设定position属性，否则无法发挥效果。根据不同的position属性值，TRBL作用不同。
下面是各个属性值的简单介绍：
- static，为position的默认属性值，即没有定位，元素出现在正常的流中，静态定位的元素不会受到top, bottom, left, right影响。
- fixed：元素位于浏览器窗口固定位置，即使窗口滚动也不会移动；Fixed定位使元素位置脱离文档流，因此不占据空间；Fixed定位的元素可以和其他元素重叠。
- absolute（绝对定位）：其元素位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>即浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位；
- 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的属性影响。
position详解的更多相关文章
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- [TimLinux] CSS float和position详解
1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...
- Kooboo CMS - Html.FrontHtml.Position 详解
DataContract 数据契约 http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html https://msdn.micr ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS中position详解与常见应用实现
在web前台开发时候,我们必不可少的会用到postion属性进行布局定位.今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在CS ...
- CSS定位之position详解(转载)
本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html position属性 在前端中,position是很常见的属性.通过这 ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
- CSS之Position详解
CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...
- Position详解---转
position有四个属性值: relative absolute fixed static 下面分别讲述这四个属性. 1. relative relative属性,相对定位,我们要搞清它是相对哪个对 ...
随机推荐
- leetcode题目10.正则表达式匹配（困难）
题目描述: 给你一个字符串 s 和一个字符规律 p,请你来实现一个支持 '.' 和 '*' 的正则表达式匹配. '.' 匹配任意单个字符'*' 匹配零个或多个前面的那一个元素所谓匹配,是要涵盖 整个 ...
- 一、基础篇--1.2Java集合-HashMap和ConcurrentHashMap的区别【转】
http://www.importnew.com/28263.html 今天发一篇”水文”,可能很多读者都会表示不理解,不过我想把它作为并发序列文章中不可缺少的一块来介绍.本来以为花不了多少时间的,不 ...
- [SQL 高级查询运算符的用法 UNION (ALL),EXCEPT(ALL),INTERSECT(ALL) ]
今天看到 三个查询运算符,给大家分享分享 为此我建立了两张表分别为 Articles 和 newArticles 我建立的时候,只建立了一张表 Articles ,表 newArticles 是 ...
- 动态执行文本vba代码
动态执行文本vba代码 Public Sub StringExecute(s As String) Dim vbComp As Object Set vbComp = ThisWorkbook.VBP ...
- APP营销软件项目常见（合规）风险评估
一个软件项目开始前,往往需要先进行风险评估以及可行性评估,尤其涉及到营销拉新类项目,需要大量依靠用户二次分享传播,为了避免项目做了无用功,分享一些常见的App项目风险: 微信分享功能 风险: 1.蒙层 ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_3-03CAP原理、常见面试题
笔记 3.分布式系统CAP原理常见面试题和注册中心选择 简介:讲解CAP原则在面试中回答和注册中心选择 C A 满足的情况下,P不能满足的原因: 数据同步(C) ...
- CMD(命令提示符)-------javac编译程序出现“”编码GBK的不可映射字符“”
问题描述:使用命令提示符(CMD)编译写好的java程序的时候出现“编码GBK的不可映射字符” 问题截图: 问题分析:看提示就知道是代码的注释出现问题,但注释格式完全正确,那么问题就只可能是注释编码出 ...
- Jmeter建立一个扩展LDAP测试计划
Jmeter建立一个扩展LDAP测试计划 添加用户 第一步你想做的每一个JMeter测试计划是添加一个线程组元素. 线程组告诉JMeter的用户数量你想模拟,用户应该发送的次数 请求,他们应该发送的请 ...
- Python——GUI编程 控件及常用信号
QSlider类中的常用信号 valueChanged: 当滑块位置发生改变时触发此信号 sliderPressed: 当用户按下滑块时触发此信号 sliderMoved: 当用户拖动滑块时触发此信号 ...
- python中的set集合
当使用爬虫URL保存时,一般会选择set来保存urls,set是集合,集合中的元素不能重复,其次还有交集,并集等集合的功能, 爬虫每次获取的网页中提取网页中的urls,并保存,这就需要利用urls = ...