借知乎的回答如下解释：

首先，我想告诉你的是，如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。
正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。
绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。

参考：https://www.zhihu.com/question/19926700/answer/13483404

css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））的更多相关文章

  1. CSS概念 - 可视化格式模型（二） 定位概述（普通流、绝对定位）

    2.定位概念 上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本 ...

  2. fixed 相对于父容器定位

    当一个元素设置为 fixed 或 absolute,不设置 top, left 则会在原位置,而脱离文档流,别的元素可以存在于它之后. 而当使用 fixed 后还想相对于父容器进行定位,或者说在当前位 ...

  3. H5弹性盒布局的使用（父容器属性）

    为父容器添加display:flex/inline-flex 父容器可以使用的属性有: 1.flex-direction:决定主轴的方向 有四个属性值: row(默认值):主轴为水平方向,起点在左端. ...

  4. CSS 盒子模型、RestCSS、浮动、定位

    盒子模型 边框:border 左边框:border-left 右边框:border-right 上边框:border-top 下边框:border-bottom 复合样式:border 边框颜色:bo ...

  5. CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

  6. CSS的布局之文档流，与行内/块级元素的延伸

    文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...

  7. CSS子元素设置margin-top作用于父容器？

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  8. CSS清除浮动使父级元素展开的三个方法

    点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...

  9. 子元素浮动父容器高度不能自适应的CSS解决方法

    百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...

随机推荐

  1. 建造者模式组装mybatis参数Example（）

    参考:github,   https://github.com/liuxiaochen0625/MyBatis-Spring-Boot-master.git 从controller组装tk.mybat ...

  2. SharePoint 是哪些人设计、开发的？

    闲下来的时候,我有时候会想:SharePoint 是哪些人设计.开发的? 毕竟,你说一个单选的字段,你从列表里面添加的时候,字段类型选的是 “Yes/No”:而如果你是通过编程把它加入列表的时候,字段 ...

  3. iOS角度与弧度转换

    在iOS中图片的旋转单位为弧度而不是角度,所以经常会在两者之间进行转换 弧度转角度 #define RADIANS_TO_DEGREES(radians) ((radians) * (180.0 / ...

  4. c#进阶之神奇的CSharp

    CSharp 简写为c#,是一门非常年轻而又有活力的语言. CSharp的诞生      在2000年6月微软发布了c#这门新的语言.作为微软公司.NET 平台的主角,c#吸收了在他之前诞生的语言(c ...

  5. 转载 c# 颜色对照表

    这篇文章来来源于C# Color Table,这里是我翻译的中文版本,其中已经加上了我的一些理解和注释.翻译这篇文章的原因是我在写C#程序的时候发现,C#自带的颜色种类极多(详见下表),如果没有直观的 ...

  6. RabbitMQ调试与测试工具-v1.0.1 -提供下载测试与使用

    最近几天在看RabbitMQ,所以发了两天时间写了一个调试和测试工具.方便使用. 下载地址:RabbitMQTool-V1.0.1.zip

  7. IT技术思维导图

    在网上看到有个人总结的java技术的东东,觉得很好,就保存下来了,码农还真是累啊,只有不断的学习才能有所提高,才能拿更多的RMB啊. java技术思维导图 服务端思维导图 前端思维导图

  8. kubernetes部署Fluentd+Elasticsearch+kibana 日志收集系统

    一.介绍 1. Fluentd 是一个开源收集事件和日志系统,用与各node节点日志数据的收集.处理等等.详细介绍移步-->官方地址:http://fluentd.org/ 2. Elastic ...

  9. PAT 1048. 数字加密(20)

    本题要求实现一种数字加密方法.首先固定一个加密用正整数A,对任一正整数B,将其每1位数字与A的对应位置上的数字进行以下运算:对奇数位,对应位的数字相加后对13取余--这里用J代表10.Q代表11.K代 ...

  10. Linux 进程与线程六

    //线程间的通信 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <e ...