position 有五个值:static、relative、absolute、fixed、inherit。
static是默认值。
就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static。
relative
没有脱离布局流,此时可以使用 top、right、bottom、left 属性。
- top 和 bottom 共存时,使用 top 值,忽略 bottom 值;
- left 和 right 共存时,使用 left 值,忽略 right 值;
relative 是相对位置。
指相对于元素的 position 为 static 时的位置:
- top 相对于 static 下移多少像素(若 top 是负值,则上移)。
- right 相对于 static 左移多少像素(若 right 是负值,则右移)。
- bottom 相对于 static 上移多少像素(若 bottom 是负值,则下移)。
- left 相对于 static 右移多少像素(若 left 是负值,则左移)。
使用 relative 之后:
- 原来的空间不会被其他元素挤占。
- 元素在最终位置时也不会挤占其他元素的空间,它浮动到其它元素的上方。
absolute
脱离布局流,此时可以使用 top、right、bottom、left,但这些属性不再是相对于 static 时的位置,而是相对于 containing block 的,相对于其边框内边缘的,而不是其 padding 内边缘。
使用 absolute 之后:
- 原来的空间会被其他元素挤占。
- 元素在最终位置时也不会挤占其他元素的空间,它浮动到其它元素的上方。
fixed
它的模式与 absolute 相同,不过无论怎么拖动滚动条,它始终固定在屏幕的指定位置。在 IE6 中不支持这个属性;在 IE7 中支持这个属性但需要指明 DOCTYPE;Firefox 等浏览器支持这个属性。
top、right、bottom、left 属性指相对于视口的。
inherit
继续父元素的 position 值。
名称解释
视口-通过解析文档,连续媒体(比如屏幕就是连续媒体,而打印机则是基于页的媒体)给用户产生一个视口(一个窗口或其它在屏幕上显示的区域)。
相关推荐
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值,元素处于正常...
position: static; position: relative; position: absolute; position: fixed; } 在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值: /* 全局值 */ position: inherit; position: ...
CSS3中的sticky定位position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和s
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性 position:sticky用法 position:sticky 被
position有五个属性: static | relative | absolute | fixed | inherit,也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解,感兴趣的朋友...
一:定位(position) 2017的微信公开课pro如期进行了,小程序将于2017年1...定位属性值:static,relative,absolute,fixed,inherit,-ms-page,initial,unset(后面3个属性是小程序中有的,没看懂是什么样子) (此
一:定位(position) 2017的微信公开课pro如期进行了,小程序将于2017年1月9日对...定位属性值:static,relative,absolute,fixed,inherit,-ms-page,initial,unset(后面3个属性是小程序中有的,没看懂是什么
定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。平台:win/IE win/FF z-index: 用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序 值: auto | 整数 | ...
定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。平台:win/IE win/FF z-index 用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序 值:auto | 整数 | inherit...
none}body,form,#fm{position:relative}td{text-align:left}img{border:0}a{color:#00c}a:active{color:#f60}.bg{background-image:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_a7f1d98c.png);...