CSS中的position属性

w3school对position的定义是:

position属性规定元素的定位类型。

由此可知,元素是可以被定位的。主要通过设定top、bottom、left、right(定位的上下左右距离)和z-index(z-index决定两个叠在一起的元素的上下层关系)来实现,而定位即设定的上下左右距离是相对父元素还是浏览器还是别的什么来说的则要由position的值来决定。

元素的定位是包括margin在内的盒模型来计算的。


基于盒模型的定位

position的值可以设成:

1、static(默认)

2、relative

3、fixed

4、absolute

5、inherit

static

position如果没被特意设定值,则为默认值static,这种情况下,top、bottom、left、right和z-index会被忽略,就是表示我不定位的意思,你设定了这些值我也不定位。

relative

当position的值设定为relative的时候,定位是相对该元素原本应该在的位置来定位的。

举个例子,两个元素A和B在页面上的显示原来是这样的:


position为static时的A和B

设定两元素的position为relative并且A和B的left都设为50px,页面变成:


relative:A和B定位left50px后

两个元素都相对自己本来在的位置右移50px。

将A的left改成100px,B保持不变,页面变成:


relative:A定位left100px、B定位left50px后

A从原来的位置右移了100px,B从原来的位置右移了50px,定位时不关心其它的元素的定位。

当两个元素叠在一起的时候,就要看z-index了,z-index值大的会在上层,可以“盖”住下层元素,当没有设定z-index的时候,一般html中写在前面的元素会处于上层。

fixed

fixed的定位是相对于可视窗口的定位,常见的右下角广告窗就是用的这个。css如下:

```

.BRCorner {

    position: fixed;

    right: 0;

    bottom: 0;

}

```

这个广告窗就固定在可视窗口的右下角了,无论页面怎么滚动都不移动。

absolute

absolute与fixed有点类似,只是fixed相对的参照物是固定的,而absolute的参照物是不固定的,absolute是相对于最近的一个position不为static祖先元素来定位的,如果没有这样的祖先元素,就是相对body定位的,这个时候是会随着页面的滚动而移动的。absolute相对body定位到为right为0、bottom为0:


absolute:相对body右下角定位滚动前

页面向下滚动后:


absolute:相对body右下角定位滚动后

absolute元素的父元素如果是fixed定位的,则该元素会和它的父元素一起随着滚动条滚动而不动的,此时它也成了相对视窗固定的了。

inherit

和其它的inherit一样,就是和父元素的position值一样。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容