【随笔】关于绝对定位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.相对父元素定位: $(& ...
随机推荐
- Hibernate Validator bean-validator-3.0-JBoss-4.0.2
信息: Hibernate Validator bean-validator-3.0-JBoss-4.0.2 后面是一大段错误信息不贴出来了... 解决方案:hibernate配置文件中加入 < ...
- <a>标签的用法以及[@text_cut]
<a href="${a.url}" target="_blank">[@text_cut s=a.title len=titLen append= ...
- delphi将工程文件转成dll
1.点击[File]—>[New]—>[Other]菜单项,打开[New Items],选择[New]: 2.选择[Dll Wizard]选项卡,点击ok,DLL工程创建成功. 3.点击[ ...
- Android-ListView-SimpleAdapter
我在上一篇博客中Android-动态添加控件到ScrollView,写到可以用Java动态添加控件到Scrollview的孩子LinearLayout里面去,这种方式是不合理的,因为这种方式是一次性把 ...
- C# DataGridView添加右键菜单的简单应用
首先,参考了下以下文章: https://blog.csdn.net/qin_zhangyongheng/article/details/23773757 感谢. 项目中要在DataGridView中 ...
- BT Tracker的原理及.Net Core简单实现Tracker Server
最近很忙,自上次Blog被盗 帖子全部丢失后也很少时间更新Blog了,闲暇在国外站点查阅资料时正好看到一些Tracker 的协议资料,也就今天记录并实践了下,再次分享给大家希望可以帮到需要的小伙伴. ...
- UML uml基础知识
uml基础知识 一.了解: uml是Unified Modeling Language的缩写,意思是统一建模语言或标准建模语言. UML规范用来描述建模的概念有,类(对象的).对象.关联.职责.行为. ...
- NOS服务监控实践
本文来自网易云社区 作者:王健 一. 背景 此处所说的服务监控程序,是通过模拟用户的请求,对一个系统的服务质量进行监控的程序.服务监控程序的主要目的是,从用户的角度出发,通过发送端到端的请求,确认系 ...
- 【Selenium专题】WebDriver启动firefox浏览器
firefox浏览器不需要下载驱动,原生支持,以下是代码运行环境,firefox启动封装在方法startFirefox()中 import org.openqa.selenium.WebDriver; ...
- OI树上问题 简单学习笔记
判断链 每个点的度数不超过2 判断树 n个点,n-1条边 每两个点之间的路径唯一 多叉树转换成二叉树 第一个孩子作为左孩子,第一个孩子的兄弟作为它的右孩子. 树的重心 树上一点,满足删除该点时,树内剩 ...