css——absolute定位层模型

最新推荐文章于 2023-09-01 14:08:08 发布
最新推荐文章于 2023-09-01 14:08:08 发布
阅读量440 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 三大基础语言 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/124753225
本文深入探讨CSS中的position属性，重点解析absolute和relative两种定位方式的差异。absolute定位会脱离正常文档流，完全根据相对于最近非static祖先元素的位置进行布局，而relative则保持原有位置并在此基础上进行偏移。理解这两种定位方式对于前端开发至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

当设置position:absolute绝对定位，脱离原来的层面，脱离了原来位置定位
在这里插入图片描述在这里插入图片描述relative保留原来位置
在这里插入图片描述

章十七、CSS —— 选择器、标签分类、display、div和span、盒子模型、文档流、浮动、定位
king_faner的博客
06-02 833
章十七、CSS —— 选择器、标签分类、display、div和span、盒子模型、文档流、浮动、定位
CSS布局总结——盒模型，position定位，尺寸，水平居中垂直居中，浮动float，BFC
愚蠢的土拨鼠要变聪明的博客
09-27 1582
1.盒模型 盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容) css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图： IE盒模型宽度=padding+content+border+margin   标准盒模型宽...
CSS 中 position:absolute 与 z-index 对层次结构影响
Gerry的专栏
11-09 1992
导读： 1. 不使用 position这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现.2. 使用 absolute 如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠.2.1 未使用 z-index     这种情况下,依
css absolute定位，让层固定在网页的底部
xjinza的专栏
09-14 4489
css absolute定位，如何让层固定在网页的底部，而不是浏览器的底部 .bottom{ position:relative; bottom:0px; left:0px;} 之前用position：absolute只能固定在浏览器底
html修改层的相对位置,css-相对定位-绝对定位-锁定-上下层-列表浮动
weixin_42395219的博客
06-04 523
css三种定位方式：普通定位如：框与框之间普通排列，浮动定位和绝对定位1.普通定位中的框排列display属性。实现块元素与行内元素互相转换如：默认：h1{background-color:orange;}span{background-color:red;}默认h1默认h1span|行内标签默认|spanspan|行内标签默认|spandisplay属性后：h1{background-color...
绝对定位置于顶层无法点击底层元素
Frank杰的博客
10-16 1325
问题是这样的，我在我的网页中引入了一个绝对定位覆盖整个网页的canvas，下方有跳转链接被画布挡住无法点击，所以写文记录一下这个问题。 解决方案： 在绝对定位的画布添加属性 pointer-events:none;这样就可以让鼠标穿透这一层直接去点击下一层解决我的问题。 CSS的属性好多啊，还是要继续学习。 ...
HTML+CSS大作业——vivo官方商城
07-08
1. **盒模型**：理解CSS盒模型是布局的基础，包括content、padding、border和margin，用于控制元素的大小和位置。 2. **选择器**：使用类选择器（.class）、ID选择器(#id)、元素选择器(element)等来定位和设置不同...
CSS——CSS基础（一篇就够用）
begefefsef的博客
02-26 530
CSS——CSS基础（一篇就够用） 一.CSS概述 1.什么是css 2.作用 3.css和html属性的使用原则 二.CSS语法规范 1.css的使用方式 ①行内样式，内联样式 ②内部样式 ③外部样式 2.css的样式特性 ①继承性 ②堆叠性 ③优先级 ④调整优先级 三.基础选择器 1.通用选择器 2.元素选择器 3.ID选择器 4.类选择器 类选择器的其它用法 ①.多类选择器 ②.分类选择器 ③.类名的定义规范 5.群组选择器 6.后代选择器 7
HTML CSS——position学习终结者(二).zip
06-15
在这个“HTML CSS——position学习终结者(二)”的资料中，我们预计将深入探讨`position`的各种用法和技巧。 首先，`position`属性用于定义元素在页面布局中的定位类型。它有四个主要值：`static`（默认值）、`...
绝对定位元素的布局和元素的层级
WQuestion的博客
10-10 488
目录 一、绝对定位元素的布局 二、元素的层级 一、绝对定位元素的布局 水平布局： left+margin-left+border-left+padding-left+width+padding-right+border- right+margin-right+right=包含块内容区的宽度 当我们开启了绝对定位...
css Absolute绝对定位居中和div沉底
师远鹏
11-05 1万+
1、绝对定位中的居中： 1 .Absolute-Center { 2   margin: auto; 3   position: absolute; 4   top: 0; left: 0; bottom: 0; r
css 将标签固定在底部
吾行远方
06-06 2万+
1、打开一个编辑软件设置一下css与div区域，使其固定在页面的底部 其主要属性：position:fixed; 绝对定位生成绝对定位的元素，相对于浏览器窗口进行定位。 2、网页中实现效果如下： 扩展：还有一种定位方式为：position:absolute;如上例方式浏览器滑动的时候，它会随着浏览器滚动条而滚动；而position:absolute;则不会 本文转载：css 将标签固定在底部 ...
关于position：absolute、relative及fixed浅析
Loliner`s Blog
07-20 1137
Absolute： 绝对定位。依据离其最近的设定了position定位的祖父辈元素进行绝对定位。如果祖父辈元素都没设定position定位，则默认依据body元素进行定位。 备注：Position的默认值为static，也就是正常定位。则上面所说的设定的position定位意思为设定了absolute、relative及fixed的非static定位。absolute是依据设定了非static
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
CSS 元素的绝对定位 position: absolute 和 position: fixed
歪脖先生的博客
02-21 2300
绝对定位当一个元素的 position属性设置为 absolute 或 fixed，它将使用绝对定位。绝对定位的元素将从文档流中完全删除，它原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样，因此不会在原先的位置留下空白。CSS 绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含块是最近已定位（position属性被设置，且不是static）的祖先元素，...
position定位
qq_33745371的博客
02-06 395
使用css的position 进行绝对定位或相对定位 一般用最多的就是： absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。 ...
面试官：介绍一下CSS定位？absolute和relative分别依据什么定位？
最新发布
upgrade_bro的博客
09-01 919
取值名称效果static静态定位(默认值)元素按照标准流布局(不脱标), top、bottom、left 、right等属性不起作用relative相对定位元素按照标准流布局(不脱标)，可以通过top、bottom、left 、right进行定位，定位参照对象是自身在标准流布局中的位置absolute绝对定位元素脱离标准流（脱标），可以通过top、bottom、left 、right进行定位，定位参照对象是最邻近的祖先定位元素， 如果找不到这样的父级元素，参照对象是视口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值