70_绝对定位（相对于其包含块元素进行定位）

已于 2022-06-13 10:44:03 修改
阅读量264 收藏
点赞数
分类专栏： HTML CSS 基础 文章标签： css
于 2021-08-20 20:28:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gty204625782/article/details/119830908
版权
本文详细介绍了CSS绝对定位的特点，包括元素如何脱离文档流、宽高如何确定、层级提升以及如何根据包含块进行定位。重点讨论了绝对定位下元素的位置计算规则，特别是包含块的概念，即正常情况和绝对定位下的定义。此外，还提到了绝对定位在前端布局中的应用和影响。
摘要由CSDN通过智能技术生成
绝对定位的特点：
  • 开启绝对定位后，如果不设置偏移量，元素的 位置 不会发生变化
  • 开启绝对定位后，元素会从文档流中脱离，则元素的性质会发生改变（脱离文档流后不需要区分块元素和行内元素），元素的宽高由内容撑起
  • 绝对定位会使元素提升一个层级（这句话是废话，因为脱离文档流肯定会提升层级）
  • 绝对定位元素是相对于其 包含块 元素进行定位的
包含块：
正常情况下：

包含块就是离当前元素最近的祖先块元素

绝对定位的包含块：

包含块就是离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则根元素就是它的包含块，所以html是根元素，又叫初始包含块

「已注销」
关注
专栏目录
CSS相对定位和绝对定位
weixin_54730535的博客
02-05 546
css定位中有相对定位和绝对定位，那么css相对定位和绝对定位之间有什么不同呢？接下来的这篇文章将给大家分别介绍关于css相对定位和绝对定位的内容以及css相对定位和绝对定位的区别。 一、首先我们来看一看css相对定位 position: relative（相对定位）：相对定位是相对于元素在文档中的初始位置。 首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。 需要注意的是：在使用相对定位时，无论是否进行移动，元素仍然占据原来
行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素·
weixin_30491641的博客
07-01 2176
行内元素进行绝对定位后会变成块级元素· position:absolute; <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* *{ padding: 0; ...
绝对定位的时候它的包含块到底是什么
suxiaotie的博客
10-11 1461
首先明确框模型中的边界在哪里： 根据规范，当一个元素的定位为绝对定位的时候，它的包含块由它定位属性为relative、absolute、fixed的祖先元素来创建。但是又根据祖先元素属性不同来划分包含块大小。分为两种情况： 1.当它的祖先元素是内联元素（即行内元素）的时候，而且文本方向是从左往右的话（即direction属性为ltr。这里要注意的是这个属性并不会将文字的书写方式改变，具
绝对定位的初始包含块问题
{ focus : web }
05-16 318
对于 body 的子节点绝对定位问题，我们一般设置 top 属性，即假设浏览器窗口左上角是 0，0 坐标，根据这一原则来进行计算合适的top值，使绝对定位元素定位到合适位置。 但是 如果用到 bottom 属性，浏览器的表现就有差异了。 假设 bottom 属性为 0 ，这时就要明确到底哪个是绝对定位元素的初始包含块，根据 w3c 规范以及css权威指南，这个初始包含块由用户代...
一问读懂CSS中的绝对定位 包含块 子绝父相 偏移量
念兮为美
07-31 855
我们在做前端开发的过程中，往往不清楚什么是绝对定位，它有什么贴点。如果开启了绝对定位，那么他会脱离文档流吗？如果子元素开启了绝对定位，那么父元素需要开启相对定位吗？子绝父相又是什么什么意思呢？这篇文章会讲解这些问题。...
CSS 绝对定位
06-01 152
 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为
详解CSS 子元素相对于父元素固定定位解决方案
11-19
在CSS布局中，子元素相对于父元素的固定定位是一个常见的需求，这主要涉及到CSS的定位机制，包括绝对定位和相对定位。本篇文章将详细解析如何实现这个目标。 首先，我们来回顾一下绝对定位（absolute）和相对定位...
元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法
09-24
）时，它会脱离正常的文档流，并相对于最近的已定位的祖先元素进行定位，如果不存在这样的祖先元素，那么它将相对于初始包含块定位，通常是浏览器窗口。这种定位方式使得元素可以自由地放置在页面的任何位置。而当...
关于页面元素的绝对定位和相对定位的一些理解
09-22
然后，创建其他div元素，并将它们的position属性设置为relative，这样这些元素就相对于包含它们的容器进行定位。 文档中还提到了AxureRP，这是一款原型设计软件，它可以用于创建网页界面原型。在AxureRP中，我们...
绝对定位也可触发行内元素的layout说明
12-11
绝对定位是CSS中的定位机制之一，它将元素从正常文档流中移除，并相对于最近的非静态定位祖先元素进行定位（如果没有这样的祖先，则相对于初始包含块，通常是浏览器窗口）。使用`position:absolute;`不仅可以改变...
绝对定位
weixin_43339334的博客
06-03 1128
绝对定位 - 当元素的position属性值设置为absolute时，则开启了元素的绝对定位 - 绝对定位的特点： 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 4.绝对定位会使元素提升一个层级 5.绝对定位元素是相对于其包含块进行定位的 包含块( containing block ) - 正常情况下：
仅限参考-相对定位和绝对定位的区别
前端菜鸟
02-13 552
position: absolute 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。 绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。 position: rela...
元素定位（绝对、相对、粘滞、固定）
comegoing_xin_lv的博客
08-04 1698
绝对、相对、粘滞、固定定位，非文档流、浮动
定位属性
flqbestboy的专栏
08-02 1703
position 定位属性，检索对象的定位方式； 一、语法：position：static /absolute/relative/fixed 取值： 1、static：默认值，无特殊定位，对象遵循HTML原则； 2、absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 5706
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
绝对定位，相对定位
ppznhy的博客
02-21 1911
绝对定位position:absolute 是相对于最近父元素进行定位的，如果最近父元素没有定位，他就会相对于根元素进行定位。而且不再占有原来位置。 相对定位position:relative 是相对自己原来位置定位，继续占有原来位置。 ...
CSS绝对定位absolute元素的初始包含块不是body元素，也不是html元素
瓜冬瓜的博客
04-22 1252
position为relative/fixed/absolute的元素会相对于距离最近的position为relative/fixed/absolute的上级元素进行定位，如果上级元素都没有position属性，那么则相对于初始包含块定位。 初始包含块不是body元素也不是html元素，而是html元素的包含块（the initial containing block），指的是以整个 canvas...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值