绝对定位absolute的官方定义:

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

  在官方定义中,并没有提到在什么情况下绝对定位相对于父元素定位,又在什么情况下相对于初始包含快也就是body定位?

  其实很简单,当该元素设置为绝对定位absolute时,如果父元素为相对定位relative,则该元素相对于父元素定位;反之则相对于初始包含快即body元素定位。

【随笔】关于绝对定位absolute相对于父元素定位的问题的更多相关文章

  1. position:fix相对父元素定位

    大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...

  2. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  3. position:fixed 相对父元素定位

    position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...

  4. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  5. margin-top影响父元素定位

    写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...

  6. CSS 实现:父元素包含子元素,子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  7. 透视 HTML子元素的margin-top样式会应用在父元素上的原由

    情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...

  8. 绝对定位( Absolute positioning )

    绝对定位( Absolute positioning ) 之前在介绍定位体系的时候,已经简单的介绍了绝对定位和固定定位.一般情况下,这两种定位的元素, 在 3D 的可视化模型中,处于浮动元素的上方,或 ...

  9. jquery的相对父元素和相对文档定位示例代码

    在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下 在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $(& ...

随机推荐

  1. SpringCloud教程 | 第三篇: 服务消费者(Feign)(Finchley版本)

    上一篇文章,讲述了如何通过RestTemplate+Ribbon去消费服务,这篇文章主要讲述如何通过Feign去消费服务. 一.Feign简介 Feign是一个声明式的伪Http客户端,它使得写Htt ...

  2. CodeForces 907E Party(bfs+状压DP)

    Arseny likes to organize parties and invite people to it. However, not only friends come to his part ...

  3. 实用的chrome插件

      有人说Chrome是世界上最好的浏览器,当然也会有不赞同.但不论怎样,工具而已,何必限制,任何一个用好了都能迅速提高我们的效率,不过还是推荐Chrome. 自然问题就变成:“为什么要用Chrome ...

  4. Chrome与Firefox对于时间处理的不同

    new Date() 函数传参数,在火狐浏览器和谷歌浏览器控制台运行,会得到不同的结果,刚开始觉得不可能,后来实际操作才发现此陷阱. 在Firefox中: var dString = "20 ...

  5. PopupWindow封装

    代码完全复制:https://github.com/pinguo-zhouwei/CustomPopwindow 使用参考:上面的github地址 1.封装类 /** * * 自定义PopWindow ...

  6. Linux常用命令,学的时候自己记的常用的保存下来方便以后使用 o(∩_∩)o 哈哈

    service httpd restart 重启Apache service mysqld restart 重启mysql [-][rwx][r-x][r--] 1 234 567 890 421 4 ...

  7. [ActionScripte 3.0] swf和网页通信

    很多时候,我们需要将swf放到网页加载,并且将相应的资源都放到网页上,在网页中加载swf通常是通过"*.swf?p=..&p2=..."这样的方式来调用这个swf和传参数的 ...

  8. ubuntu14.04搭建ftp服务器

    一,搭建匿名FTP服务器 实现ftp匿名登录,上传,下载,重命名文件. 1. 首先安装vsftpd:sudo apt-get install vsftpd,装好之后,默认的ftp根目录是在 /srv/ ...

  9. myeclipse关于svn更新报错:OPTIONS of '/svn/Xxx': 403 Forbidden

    这个问题出现原因是其他人修改了我原本写作的代码位置,把两个类转移到了别的文件夹,我更新之后只显示除了他增加的文件夹而没有里面的类,同时爆出错误: 问题原因:svn版本号不匹配,即跳版本. 解决如下:r ...

  10. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...