【随笔】关于绝对定位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.相对父元素定位: $(& ...
随机推荐
- XJOI 3606 最大子矩形面积/LightOJ 1083 Histogram(单调栈/笛卡尔树)
A histogram is a polygon composed of a sequence of rectangles aligned at a common base line. The rec ...
- 移动距离——第六届蓝桥杯C语言B组(省赛)第八题
原创 问题描述: 移动距离 X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3...当排满一行时,从下一行相邻的楼往反方向排号.比如:当小区排号宽度为6时,开始情形如下: ...
- JavaScript函数参数问题
声明一个回调函数 function(){ alert(data); } 这个时候,若调用这个函数的传入了一个同名data,则这里会引用到data的值,因为他们处于同一作用域.
- unigui不是单个网页相应的链接,而是整体Web Application,如何把webApp的子功能映射到微信公众号菜单?
只需要用UniApplication.Parameters.Values[‘xxx’]读取url的参数然后调用就可以 例如:要打开公众号菜单的取样送检指南查询模块,在自定义菜单设定:http://ww ...
- Android-原生对话框
package liudeli.ui.all; import android.app.Activity; import android.app.AlertDialog; import android. ...
- 使用ContentPresenter,不使用ContentControl
参考: https://wpf.2000things.com/2017/04/06/1204-using-a-datatrigger-to-change-content-in-a-contentpre ...
- Replication--Alwayson+订阅
场景: 主服务器:SubServer1 从服务器:SubServer2 监听者:RepListener 分发库:DisServer 发布数据库:RepDB1 发布服务器:RepServer1 当fai ...
- Redis 七月小说网的爬虫缓存设计
一.爬虫策略 1.主服务器先根据spider.all set排重,再 lpush request_url 到spider.wait List中,并且 sadd request_url 到 set中: ...
- vector在一个循环里同时删除插入
vector<int> a; a.push_back(10); a.push_back(20); a.push_back(30); a.push_back(40); a.push_back ...
- BZOJ.5407.girls/CF985G. Team Players(三元环计数+容斥)
题面 传送门(bzoj) 传送门(CF) \(llx\)身边妹子成群,这天他需要从\(n\)个妹子中挑出\(3\)个出去浪,但是妹子之间会有冲突,表现为\(i,j\)之间连有一条边\((i,j)\), ...