绝对定位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. 17、Semantic-UI之分页插件

      在很多的前端开发框架中都会有提供分页插件,但是分页插件的使用如果手动编写还是比较复杂的.使用Semantic-UI中的分页插件更加简单方便.分页插件的使用必须要和后台结合. 示例:定义分页插件 & ...

  2. C++ 调用C++写的类库的2种方法之一(隐式链接)

    一:创建C++ DLL类库,名称:Dll1 1.Dll1.h /*#ifndef Dll_API #else #define Dll_API _declspec(dllimport) #endif * ...

  3. Android开发环境包下载地址

    Android SDK Android NDK Android Studio 官方下载地址   (网上转来的) 如果下载速度很慢或者无法下载,有三种解决方法 1.忍耐. 2.使用P2SP下载工具,比如 ...

  4. ASP.NET Core入门(一)

    大家好,很荣幸您点了开此篇文章,和我一起来学习ASP.NET Core,此篇文字为<ASP.NET Core入门>系列中的第一篇,本系列将以一个博客系统为例,从第一行代码,到系统发布上线( ...

  5. 网易对象存储NOS图床神器

    本文来自网易云社区 注:使用过程中有什么问题或建议欢迎到如下链接提交:http://note.youdao.com/noteshare?id=6321086fa4d7a6c003656354c1aa6 ...

  6. git .gitignore忽略规则不生效解决办法

    忽略规则不生效, 原因是.gitignore只能忽略那些原来没有被track的文件, 如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的. 那么解决方法就是先把本地缓存删除(改变成 ...

  7. linux 安装python3.7 报错No module named '_ctypes'

    ModuleNotFoundError: No module named '_ctypes' 操作系统:centos yum install libffi-devel ./configure --en ...

  8. Hadoop完全分布式搭建全过程

    本次操作共4台虚拟机(node211,node212,node213,node214),node211为NameNode,其余3台为DataNode,SecondaryNamenode为node212 ...

  9. MySQL 5.7.16 在CentOS 6.5 x64 安装

    1.创建MySQL组和MySQL用户   # groupadd mysql   # useradd -g mysql mysql2.创建MySQL软件安装路径/opt/software   # mkd ...

  10. Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...