【随笔】关于绝对定位absolute相对于父元素定位的问题

  绝对定位absolute的官方定义:

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

  在官方定义中,并没有提到在什么情况下绝对定位相对于父元素定位,又在什么情况下相对于初始包含快也就是body定位?

  其实很简单,当该元素设置为绝对定位absolute时,如果父元素为相对定位relative,则该元素相对于父元素定位;反之则相对于初始包含快即body元素定位。

时间: 2024-10-24 19:23:34

【随笔】关于绝对定位absolute相对于父元素定位的问题的相关文章

当子元素需要相对父元素定位时,父元素无法被子元素撑大该怎么办

今天遇到了子元素相对父元素定位之后,父元素无法被撑开的问题,那是因为绝对定位之后,子元素已经脱离文档流了所以无法用自身的高度把父元素撑开,这个时候只能用js来解决这个问题了: function psize(){ $("父元素").css('height',$("子元素").innerHeight()); } 上面是封装了一个函数,可以通过调用使用. height与innerHeight 的具体情况请看上一篇随笔.

margin-top影响父元素定位

写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class="inner"> 子元素 </div> </div> CSS代码: .demo{ width: 100%; height: 100%; background: #a4c1de; } .inner{ width: 200px; height: 200px; backgrou

子元素的margin-top和margin-bottom影响父元素定位的原因和解决方法

<!DOCTYPE HTML> <html> <head> <title>margin transfer </title> <meta charset="utf-8"> <style type="text/css"> body{margin: 0;padding: 0;} .outer{width: 100px;height: 100px;background: #ccc;} .in

子元素要绝对定位时,父元素应该怎么办?

昨天做练习时,遇到了这个问题: 如果子元素设置绝对定位(absolute),父元素需要设置相对定位(relative),否则子元素就不知道会飘到哪去了. 但总觉得还是没搞清楚,就去百度了,得到了一些见解,以下: 一.表 实现子元素在父元素中的绝对定位必须满足以下两个条件: 1.父元素要有相对定位属性(position:relative), 2.子元素设置绝对定位(position:absolute),并且同时加四个方向(top,bottom,left,right)的任意方向的属性值 <!DOCT

使元素相对于窗口或父元素水平垂直居中的几种方法

如果一个元素具有固定或相对大小,要使其不管如何调整窗口大小或滚动页面,始终位于浏览器窗口中间,可使用如下方法: <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title><meta charset="utf-8&q

绝对定位( Absolute positioning )

绝对定位( Absolute positioning ) 之前在介绍定位体系的时候,已经简单的介绍了绝对定位和固定定位.一般情况下,这两种定位的元素, 在 3D 的可视化模型中,处于浮动元素的上方,或者说比浮动元素更靠前1. 参照元素 绝对定位(Absolute positioning)元素定位的参照物是其包含块,既相对于其包含块2进行定位,不一定是其父元素. 示例代码: <div style="position:relative; width:300px; height:300px; b

Web前端面试指导(十):元素定位有哪些?

本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以本题的难易程度为简单. 解题思路 position为元素定位属性,包含以下属性值 1. absolute绝对定位 相对位置为父元素为非static的第一个父元素进行定位. 2. fixed  固定定位(老IE6不支持) 相对于浏览器窗口进行定位. 3. relative相对定位 相对于其正常(默认布

子元素绝对定位,父元素高度自适应子元素高度

子元素设置了绝对定位,父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度. 子元素的高度是不确定的    可以JS设置父元素高度 <<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">divid="father"> <<span class="h

任务三——左右定宽,中间一栏根据父元素宽度填充满

还有一个要求是“中间一栏长度改变时,父元素的高度始终为子元素中最高的高度”,这个之后总结,先分析布局. 看到这个任务,首先想到的就是双飞翼布局,之后有看其他人的代码,总结了一下: 一.position方式: 左.中.右顺序可以任意调整.左右设置绝对定位脱离文档流,再通过left.right.top 等属性进行定位,中间嵌套一个div,设置左右外 边距分别为左右部分的宽度,使得中间部分的内容不会被左右遮盖. <style> *{ margin:0; padding:0; } .left,.rig