position:absolute/relative/fixed小结

1、绝对定位:position:absolute;

  当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是0,那么它将漂浮在原来的位置上,否则,会根据相对该元素外的第一个非static属性的元素进行定位,如果没有非static属性的父元素,则相对于body定位。当偏移后超出浏览器视线的向下或向右的内容不会被隐藏,而是会出现滚动条,但是向左或向上的内容超出后会被隐藏。

2、相对定位:position:relative;

  当设置了相对的偏移量后,这个div原来所占据的位置(文档流)不会被后面的文档流填补,而是空在那里。当偏移后所有超出浏览器视线的内容会被隐藏。

3、position:fixed;固定定位

  设置后,元素脱离文档流,可以使层级固定不动。

4、absolute/relative/fixed三者区别:

  ①相对定位relative不会失去文档流的位置,而绝对定位absolute会失去原来在文档流中的位置,被后面的内容所取代。

  ②无论是相对定位relative、固定定位fixed还是绝对定位absolute,当偏移量内容超出上面、左边浏览器窗体(即可视区域)的时候,超出内容都会被隐藏;但是当偏移量内容超出右边、下面窗体的时候,相对定位relative会隐藏超出部分,而固定定位fixed、绝对定位absolute会出现滚动条。

  ③相对定位relative、固定定位fixed和绝对定位absolute都会脱离正常文档流,浮动在正常文档流的上面,如果遮盖了正常文档流,可以通过设置z-index来解决。

5、absolute/relative/fixed实际应用

①position的值为absolute或fixed可以创建一个BFC

  BFC:块级格式化上下文,把浮动的元素框起来,浮动不会溢出,相当于页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素。

  BFC作用: a.清除浮动

        b.防止margin折叠

        c.左右两栏布局

②position:fixed  能够使层固定不动,比如使导航栏不会随页面滚动而滚动。

③绝对定位里这些值可以不指定,能够自动计算:top/left/right/bottom/width/height ,如果冲突了,以width和height为准。处理冲突也是可以进行一些利用,比如居中。

时间: 2024-08-02 15:11:09

position:absolute/relative/fixed小结的相关文章

今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;

首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重点: 相对定位元素经常用来作为绝对定位元素的容器块: absolute 定位使元素的位置与文档流无关,因此不占据空间. absolute 定位的元素和其他元素重叠.

position:absolute, relative 的用法

  static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级.就无法通过top,left ,bottom,right 定位.(static 为默认值)  relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级.相对于父级的定位!  absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位.选取其最近一个最有定

position的relative和absolute属性

在对界面布局时,往往需要用到position属性.在W3C中,对position的定义是:规定元素的定位类型. 顾名思义,absolute代表绝对定位.在查阅了相关资料后,发现absolute定位是相对于其包含块(containing block)绝对定位,而这个包含块不一定是父级元素.例如,当父级元素没有设定position属性,而父级以上的某个祖先元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块.也就是说,一个元素的包含块

position:absolute会使元素脱离文档流

当元素设置position:absolute时,会脱离正常文档流,后面元素会忽略该元素->覆盖 可以给元素设置min-height解决 ------------------------------------------------------- postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: absolute position: relative position: fixed position: static position

css的position:absolute

绝对定位的特性:1.绝对定位的元素以前所占空间会释放,脱离普通文档流,在层级上是最上层的,所以会覆盖html里它的下面的元素. 用途:不用relative限制absolute,(有利于样式的复用),a.实现一个小东西在一个块上. 2.绝对定位的元素有位置跟随的特性,即跟随它html结构里的上一个元素(“ ”也可以). 用途:a.用于布局写某个小东西在某元素的后面(上下左右均可),用margin调距离. 3.绝对定位后元素出现的位置和没定位时一样,可用top,right,bottom,left,m

布局模型 之 层模型(position的relative、absolute与fixed区别?)

css的布局模型分为流动模型(Flow).浮动模型(Float).层模型(Layer). 浮动模型(Float)和层模型(Layer)有什么显著区别?     浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动:浮动的元素仍然会占据文档流的物理空间.关于浮动模型的详细说明请看另一篇文章的介绍.http://ycgit.blog.51cto.com/8590215/1958452 层模型(Layer):设置为层模型的元

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了.但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性. CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识.它就类似与photoshop里面图层

HTML静态网页的格式与布局(position:(fixed、absolute、relative)、分层、float(left、right))

一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或relative):那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素). 2.外层有position:absolute(或relative):那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素). 示例: 三.posit