设置为绝对定位的元素框从文档流完全删除,

并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。

元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

相对定位是“相对于”元素在文档中的初始位置,

而绝对定位是“相对于”最近的已定位祖先元素,

如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

CSS 绝对定位与相对定位的区别的更多相关文章

  1. css中绝对定位和相对定位的区别

    先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...

  2. css绝对定位、相对定位和文档流的那些事

    前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...

  3. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  4. CSS 绝对定位和相对定位

    CSS定位属性:一个定位属性,需配合四个定位坐标,实现定位 固定定位fixed 说明: 1.固定定位是相对于"浏览器窗口" 2.如果只设置了定位属性,未指定定位坐标时,元素将停留在 ...

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

    首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...

  6. 【CSS】绝对定位和相对定位

    html:定位层 特点: >>完全脱离默认文档流,独立于立体层面的Z轴之上. >>和float浮动一样都脱离了默认文档流,但float元素与默认文档流之间会相互产生影响,而定位 ...

  7. css中的相对定位与绝对定位的区别

    1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...

  8. HTML 学习笔记 CSS样式(相对定位 绝对定位)

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

  9. [Web 前端] CSS 盒子模型,绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

随机推荐

  1. 流畅的python学习笔记:第十三章:重载运算符__add__,__iadd__,__radd__,__mul__,__rmul__,__neg__,__eq__,__invert__,__pos__

    在前面第十章以及第一章的时候介绍了Vector对象的运算符重载.第十三章专门介绍运算符重载.这里我们看几个之前没讲过的运算符__neg__,__pos__,__invert__ class Vecto ...

  2. Docker与虚拟化

    核心知识点: 1.虚拟化的定义?虚拟化的核心和目标? 2.虚拟化的分类?Docker属于那种虚拟化? 3.Docker与传统虚拟化的区别?docker是直接在操作系统上实现虚拟化,直接复用本地操作系统 ...

  3. ruby 精选网站

    ruby 基础   http://www.yiibai.com/ruby/2013/0820174.html     http://www.rubydoc.info/github       http ...

  4. 郝健: Linux内存管理学习笔记-第2节课【转】

    本文转载自:https://blog.csdn.net/juS3Ve/article/details/80035753 摘要 slab./proc/slabinfo和slabtop 用户空间mallo ...

  5. python中的编码转换

    今天遇到了一个问题,将字符串“\uxxxx\uxxxx”转换成汉字.网上查了很多资料都不行. 后来看到,发现一个函数就OK了. str = str.decode('unicode_escape') 等 ...

  6. POJ 2348 Euclid Game (模拟题)

    Euclid's Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7942   Accepted: 3227 Des ...

  7. Linux学习之路(一)命令基本格式

    据统计Linxu里面能够识别的命令超过3000个,而我们常用的Linux基本命令在60个左右.常用命令是我们必须掌握的命令,需要我们多练习才能记住,最起码要敲3遍以上. 简单的把常用命令分为以下几大类 ...

  8. 常用JS组件整理

    1.漂亮的弹出层----artDialog http://aui.github.io/artDialog/ 2.弹出层 ------layer http://sentsin.com/jquery/la ...

  9. MySQL_各城市在线产品天订单数据20161130

    #sealreport010 `tb010_02d`各城市在线产品天订单数据 #sealreport010 `tb010_02d`各城市在线产品天订单数据 SELECT d.ID,a.城市,a.在线日 ...

  10. 51nod_1236_序列求和 V3 _组合数学

    51nod_1236_序列求和 V3 _组合数学 Fib(n)表示斐波那契数列的第n项,Fib(n) = Fib(n-1) + Fib(n-2).Fib(0) = 0, Fib(1) = 1. (1, ...