css笔记：position之absolute定位

已于 2022-06-12 02:59:49 修改
阅读量463 收藏
点赞数
分类专栏： Web开发 文章标签： css 前端
于 2022-06-12 02:58:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s634772208/article/details/125241342
版权

absolute定位

绝对定位，相对于最近的定位祖先元素进行定位，如果绝对定位的元素没有祖先，它将使用文档主体（body）。

absolute定位类比到MFC中，就是父子窗口的关系。但这里要注意一点：相对于最近的定位祖先元素进行定位，如果绝对定位的元素没有祖先，它将使用文档主体（body）。最近一词怎么理解呢？即从父节点开始，一直往上层找，只要找到一个非static（默认定位）定位的元素，即为最近的定位祖先。如果没有此条件的定位祖先，那就取body为定位祖先。

示例

在这里插入图片描述

shanql
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定位：relative相对定位、absolute绝对定位、fixed固定定位
m0_64460142的博客
04-08 4625
作者有话说:在学定位之前有了解过吗？再没学浮动之前，这些块元素标签会出现在一列，要想实现并排就可以使用浮动float，现在我们可以学习定位，给背景图片或者图片、div、border等添加属性等，有定位在祖先级的、定位在浏览器的，比如说浏览京东页面时，当你拉动网页的时候页面会动，但是会有一个栏目始终保持在那个位置不动，这就是使用的定位，接下来一起看看吧！ 定位使用position static 默认值，没有定位 relative 相对定位 ...
CSS position: absolute 绝对定位精讲
热门推荐
DevilPace的博客
07-14 1万+
绝对定位基本特征 绝对定位的第一个特征在于会从文档流中脱离，不受其他元素影响，定位是“绝对”的，所以称之为绝对定位，如果是相对定位，会受其他元素影响，则定位是“相对”的； 未使用定位：即元素在正常文档流当中 .frame { margin: 0 auto; margin-top: 50px;
关于position:absolute的定位
qq_40388699的博客
07-16 830
一般网络上谈到关于position:absolute的绝对定位问题，有些地方会说：绝对定位元素相对的元素是它最近的一个已定位祖先，若没有这样的祖先则相对于body进行定位。 这句话并不完全正确 应参考W3school的解释：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 请看如下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset
深入理解css之 —— absolute定位
景洪的博客
05-22 644
这一篇主要总结一下position属性： - absolute绝对定位 - relative相对定位 position这个属性定义建立元素布局所
CSS盒子的绝对（absolute）定位
jiangxindu1的专栏
10-04 996
CSS中使用盒子时，对于绝对定位（ ）
CSSDemo:CSS学习笔记
04-08
3. 定位布局：使用`position`属性（如`relative`、`absolute`和`fixed`）进行精确定位。 4. 弹性布局（Flexbox）：提供更灵活的单行或单列布局，通过`display: flex`开启。 5. 网格布局（Grid）：适用于复杂的二维...
CSS基础_css_笔记
09-23
4. **定位布局**：使用`position`属性（如`relative`、`absolute`、`fixed`），可以精确控制元素位置。 5. **Flex布局**：现代浏览器支持的弹性盒模型，允许在容器内动态调整子元素的排列和大小。 6. **Grid布局**：...
CSS学习笔记之常用Mixin封装实例代码
12-02
这些预处理器引入了多种特性，其中之一就是`@mixin`，它允许创建可重用的代码块。本文将详细讨论`@mixin`的概念及其在实际开发中的应用，主要基于Less语言，但同样适用于其他预处理器。 **1. @mixin 概述** `@mixin...
使用css 绘制笔记本电脑
09-08
总之，使用CSS绘制笔记本电脑是一个综合运用选择器、定位、盒模型、边框、渐变、阴影和伪元素等技巧的过程。通过熟练掌握这些技术，你可以创造出各种各样的视觉效果，提升网站的用户体验。同时，不断地实践和学习新...
CSS笔记全面手册
04-07
4. **定位**：`position`属性（static、relative、absolute、fixed）控制元素的位置，`z-index`决定元素的前后顺序。 ### 三、CSS颜色和背景 1. **颜色**：可以使用色值（如#000000、rgb()、hsl()）、颜色关键词...
CSS学习20：absolute（绝对定位）
玉安_ZhangDe的博客
04-09 6681
绝对定位的介绍： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 语法： 选择器 { position: absolute; } 1、完全脱标 —— 完全不占位置； 2、父元素没有定位，则以浏览器为准定位（Document 文档）。 3、父元素要有定位 i.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ii.绝对定位的特点总结：（务必记住）...
css中position：absolute详细介绍
qq_44883318的博客
10-04 1333
定义： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。这些属性是相对于HTML标签
position定位
上帝掉眼泪
03-24 601
position的定位方式
position之absolute
lbs311709000127的博客
01-18 289
position：absolute 作用：使元素脱离常规流 特点： 脱离常规流 用百分比设置元素宽和高的时候要注意是按照谁的百分比设置的------最近定位祖先元素 如果没有最近定位祖先元素，会默认body是 z-index可以控制堆叠顺序 案例一（1，4） html <body> <div class="box">A...
css position之absolute定位详解
continue my dream
09-02 855
我的目的是：你看完之后不再迷惑 定位问题：当我们对某区块position:absolute;时,若该区块的父辈元素没有使用position:relative,则该元素的top、bottom、left、right属性都是相对浏览器的位置进行定位,反之则对该元素的父辈位置进行定位，position:absolute是相对它的第一个非静态定位的祖先元素而展示，如： " class="thumbn
相对定位(relative)，绝对定位(absolute)，固定定位(fixed)
weixin_44446758的博客
05-08 1万+
一、绝对定位 position：absolute 绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（html）。 绝对定位本身与文档流无关，因此不占空间，元素会脱离文档流，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，并且可以通过z-index属性来...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
最新发布
csgojingyu的博客
10-21 1万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
CSS | absolute绝对定位的默认位置
MGsniper的博客
01-18 5795
问题情境  关于绝对定位元素的原点，我们常接受的一种明确又不精确的说法：绝对定位元素的原点是第一个非static定位祖先节点的左上角。  这个说法有关参考元素的描述是精确的——即绝对定位元素的参考元素是第一个非static定位祖先节点，如果这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块），一般情况下，ICB就是html根节点。  但这个说法的后半...
position absolute相关知识点
玉案轩窗的博客
07-30 1万+
前言 最近再看position相关知识点，发现有许多以前没有注意到的细节知识点，有不小的收获，本文就position absolute使用详细分析下。 具体分析 position是CSS中比较重要的一个属性，常用于页面布局，它的值有4个： static：默认文档流 relative: 相对定位，相对于自身位置 absolute：绝对定位，相对于非static父元素进行定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值