绝对定位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. 让PHP更快的提供文件下载 【转】

    一般来说, 我们可以通过直接让URL指向一个位于Document Root下面的文件, 来引导用户下载文件. 但是, 这样做, 就没办法做一些统计, 权限检查, 等等的工作.  于是,  很多时候,  ...

  2. C# 连接Oracle,并调用存储过程(存在返回值),C# 调用sql存储过程

    1.获取Oracle表格信息 public OracleHelpers(string ConnStr) { ConnectionString = ConnStr; conn = new OracleC ...

  3. HTTP杂项

    HTTP请求头中的origin, referer和host三个字段的区别 host 描述请求将被发送的目的地,包括,且仅仅包括域名和端口号 在任何类型请求中,request都会包含此header信息. ...

  4. C# 异常日志记录

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web; na ...

  5. NOIP提高组题目归类+题解摘要(2008-2017)

    因为前几天作死立了一个flag说要把NOIP近十年的题目做一做,并写一个题目归类+题解摘要出来,所以这几天就好好的(然而还是颓废了好久)写了一些这些往年的NOIP题目. 这篇博客有什么: 近十年NOI ...

  6. leetcode 213. 打家劫舍 II JAVA

    题目: 你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金.这个地方所有的房屋都围成一圈,这意味着第一个房屋和最后一个房屋是紧挨着的.同时,相邻的房屋装有相互连通的防盗系统,如果两间相邻 ...

  7. kvm linux虚拟机在线扩展磁盘

    说明: 1) vmware ESXi虚拟化平台也支持这台在线扩展磁盘功能. 2) kvm虚拟机也支持在线扩展磁盘功能,在线扩展有特定的使用环境,主要用于不能随便停用的生产环境中. 3) 经过测试KVM ...

  8. android开发如何获取res/raw和assets文件夹的路径

    ---恢复内容开始--- android开发如何获取res/raw和assets文件夹的路径,主要分为两种情况: 1.如果你只是拷贝动作,那么你只需要得到res/raw和assets文件输入流就可以, ...

  9. Struts2框架action层学习心得体会

    在struts2框架中,当action处理完之后,就应该向用户返回结果信息,该任务被分为两部分:结果类型和结果本身. 结果类型提供了返回给用户信息类型的实现细节.结果类型通常在Struts2中就已预定 ...

  10. leetcode-819-Most Common Word(词频统计)

    题目描述: Given a paragraph and a list of banned words, return the most frequent word that is not in the ...