position

  • 版本:CSS2/3
  • 媒体:视觉
position属性在CSS定位中是比较常用的,本文将带你深入理解position属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上position的演示案例,希望能够对你有所帮助。

position的具体语法

positionstatic | relative | absolute | fixed | center | page | sticky

默认值static

适用于:除display属性定义为 table-column-group 和 table-column之外的所有元素

继承性:无

动画性:否

计算值:指定的值

position的取值介绍

static:
对象遵循常规流。toprightbottomleft等属性不会被应用。
relative:
对象遵循常规流,并且参照自身在常规流中的位置通过toprightbottomleft属性进行偏移时不影响常规流中的任何元素。
absolute:
对象脱离常规流,使用toprightbottomleft等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
fixed:
对象脱离常规流,使用toprightbottomleft等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。
center:
对象脱离常规流,使用toprightbottomleft等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(CSS3)
page:
盒子的位置计算参照absolute。盒子在分页媒体或者区域块内,盒子的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)
sticky:
对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

position的使用说明

检索对象的定位方式。
  • 当position的值为 relative | absolute | fixed | center | page | sticky 时,其层叠级别通过z-index属性定义。
  • 绝对定位的元素,在toprightbottomleft属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。用这个特性你或许会干这样的事:demo
  • 对应的脚本特性为position

position的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0 #1 #2 #3 1.0-25.0 #2 #3 1.0-5.1.7 #2 #3 1.0-31.0 #2 #3 4.0-18.0 #2 #3
版本 7.0-11.0 #2 #3
  1. 不支持position属性的fixed参数值。
  2. 不支持position属性的CSS3新增属性值: center | page
  3. 不支持position属性的CSS3新增属性值: sticky

position的完整演示案例

HTML+CSS重难点(一) 盒子模型及标准流下的定位

默认情况下绝大多数元素的盒子边界、边框和填充宽度都是0,盒子的背景是透明的。所以,在不设置CSS样式的情况下看不到元素的盒子;...1月7日

使用margin-left,margin-top与position:absolute来对图片进行定位。使用了CSS3中的calc()来计算需要定位的值。示例图片如下:2...2016年10月9日

CSS 中的定位属性详解

元素仍然处于正常文档流当中,但可以通过left、top、right和bottom的CSS规则来改变元素的位置。如果元素一旦使用了相对定位之后...2016年8月1日

六个角度剖析css中的浮动定位

首先给浮动一个定义:浮动就是程序中定位的一种那么什么又是定位:元素框相对于其正常位置应该出现的位置在哪儿浮动定位:解决了多个块级元素能在一行内显示...2016年6月23日

CSS定位问题(1):盒模型、浮动、BFC

CSS·BFC,定位,盒模型分享到:引子:在谈到css定位问题的时候先来看一个小问题:已知宽度(假如:100px)div框,水平居中,左右两边分别使用div框填充...2016年4月27日

CSS绝对定位absolute详解

介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float,对理解绝对定位absolute会大有帮助...2016年5月4日

《CSS权威指南》学习记录——定位(一)

利用定位,可以准确地定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。定位的类型关键字:position...2016年6月10日

深入理解CSS中背景background-position负值定位

作者:css教程点击次数:52次发布日期:2016-05-25摘要:深入理解CSS中背景background-position负值定位,有点向我们裁剪背景图片...2016年5月25日

深入理解CSS定位中的偏移

CSS有三种基本的定位机制:普通流、浮动和绝对定位。利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素...2016年3月21日

昨天我练习了用CSS(即层叠样式表Cascading Stylesheet)Selector来定位(locate)页面上的元素(Elements)...2016年3月14日

iv+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。Position属性有四个值:static、fixed、absolute和relative...2015年11月26日

CSS网页布局教程:绝对定位和相对定位

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性...2015年8月30日

[day04学习笔记] CSS盒子定位属性 深入剖析!!

[day04学习笔记]CSS盒子定位属性详解首先做一下概念性的了解:定位就是把元素放在哪个位置!实际上每个元素都有个定位属性:position:定位属性有四个值...2014年8月10日

关于css定位,你需要知道的5件事

已经可以通过不同的css布局技巧制作出很复杂的布局。其中有些技巧有很长的历史(比如:floats),也有一些是近几年才被青睐的(比如flexbox)。在这篇文章中...2016年10月22日

CSS定位-position

CSS定位:#三种定位机制:(1)普通流,(2)浮动,(3)绝对定位;属性描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置中...2015年2月8日

CSS定位(Positioning)

它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。​CSS有三种基本的定位机制:普通流、浮动和绝对定位...2015年7月28日

【css】position的绝对定位absolute与relative的区别

将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过cssz-index属性定义。此时对象不具有边距...2016年11月4日

Css教程:position定位的元素

所以在它成为你的惯用技巧前你需要掌握它们。一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来。CSS盒模型和定位的类型为了搞清楚定位首先你得了解C...2015年5月8日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册