【随笔】关于绝对定位absolute相对于父元素定位的问题
绝对定位absolute的官方定义:
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
在官方定义中,并没有提到在什么情况下绝对定位相对于父元素定位,又在什么情况下相对于初始包含快也就是body定位?
其实很简单,当该元素设置为绝对定位absolute时,如果父元素为相对定位relative,则该元素相对于父元素定位;反之则相对于初始包含快即body元素定位。
【随笔】关于绝对定位absolute相对于父元素定位的问题的更多相关文章
- position:fix相对父元素定位
大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- position:fixed 相对父元素定位
position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...
- css position absolute相对于父元素的设置方式
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...
- margin-top影响父元素定位
写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- 透视 HTML子元素的margin-top样式会应用在父元素上的原由
情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...
- 绝对定位( Absolute positioning )
绝对定位( Absolute positioning ) 之前在介绍定位体系的时候,已经简单的介绍了绝对定位和固定定位.一般情况下,这两种定位的元素, 在 3D 的可视化模型中,处于浮动元素的上方,或 ...
- jquery的相对父元素和相对文档定位示例代码
在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下 在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $(& ...
随机推荐
- GEEK UNINSTALLER
geek.exe https://geekuninstaller.com/download Event log message indicates that the Windows Installer ...
- 201621123023《Java程序设计》第7周学习总结
一.本周学习总结 1.1 思维导图:Java图形界面总结 二.书面作业 1. GUI中的事件处理 1.1 写出事件处理模型中最重要的几个关键词. 关键词:事件源.事件监听器.事件处理方法.事件适配器 ...
- Ubuntu的中文乱码问题
目标:使系统/服务器支持中文,能够正常显示. 1.首先,安装中文支持包language-pack-zh-hans: $ sudo apt-get install language-pack-zh-ha ...
- java的排序算法
分享网页:https://yq.aliyun.com/articles/136085?utm_content=m_26483
- 三,Smarty模板技术/引擎——变量操作(2)
1, 变量的分类 ① 从PHP中分配的变量,比如a.php跳转到b.php时候,可以在a.php中分配变量,b.tpl中直接调用.a.php中代码,$smarty->assign(‘str’,’ ...
- php.ini中safe_mode开启之后对于PHP系统函数的影响
safe_mode是提供一个基本安全的共享环境. 在一个多用户共享的phpweb服务器上,当这台服务器开启了safe_mode模式,有以下函数将会受到影响. 首先,以下尝试访问文件系统的函数将会被限制 ...
- [ActionScript 3.0] AS3 socket示例(官方示例)
下例对套接字执行读写操作,并输出在套接字事件期间传输的信息. 该示例的要点遵循: 该构造函数创建名为 socket 的 CustomSocket 实例,并将主机名 localhost 和端口 80 作 ...
- 干掉Vivado幺蛾子(2)-- 快速替换debug probes
目录 1. 什么是ECO 2. 操作步骤 参考文献: 我们做项目,进入找bug阶段时,需要用ILA捕获相关的信号.之前我做项目,每改动一次探针(debug probes),都要重新综合.实现,通常要花 ...
- React第二篇:组件的生命周期
前言:因为生命周期是必须要掌握的,所以React的第二篇咱就写这. (版本:16.3.2) React的生命周期大致分为四个状态:分别是Mouting.Updating.Unmounting.Erro ...
- Angular material mat-icon 资源参考_Communication
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...