CSS3-绝对定位

最新推荐文章于 2025-11-25 14:29:34 发布
原创 最新推荐文章于 2025-11-25 14:29:34 发布 · 109 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #前端 #css

本文详细阐述了绝对定位在网页布局中的概念，介绍了绝对定位元素的特点，并通过代码示例分别展示了块元素和行内元素在没有设置偏移属性以及有已定位父元素情况下的应用。

一、绝对定位的概念

二、绝对定位元素的特点

三、代码演示：以块元素为例

没有设置偏移属性时：

没有已定位的父元素：

有已定位的父元素：

四、代码演示：以行内元素为例 

css-绝对定位的参考对象
03-06
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许元素脱离其正常文档流，并根据相对于其他元素或浏览器窗口进行定位。本篇将深入探讨绝对定位的参考对象、工作原理及其在实际开发中的应用...
css 相对定位 绝对定位 浮动 分析
09-25
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
CSS-----绝对定位盒子水平居中
wode39的博客
08-08 1408
正确做法：子盒子通过left属性向右移动父盒子宽度的50%，再通过margin-left负值向左移动自身宽度的50%；垂直居中同理可得：通过top属性向下移动父盒子高度的一半，再通过margin-top负值向上移动自身个高度的一半。在CSS中绝对定位的盒子无法通过margin：0 auto;.........
CSS定位--绝对定位是根据谁定位的？
WenDy18cm的博客
03-17 1728
绝对定位是相对于谁确定位置的？有一句口诀：子绝父相，子绝父绝。意思就是，开启了绝对定位的子元素根据它的开启了相对定位或者绝对定位的父元素而确定位置。 事实上，绝对定位的元素是根据包含块确定位置的，包含块就是离他最近的开启了定位的祖先元素。 但是，如果祖先元素没有开启过定位，那就相对于初始包含块定位 什么是初始包含块？上代码！ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"&g
css--定位
m0_71073043的博客
07-18 1376
的偏移元素参考的是元素本身，不会使元素脱离文档流，元素的初始位置占据的空间会被保留。在使用相对定位的情况下，不添加偏移量，定位元素不发生变化。） 粘性定位刚开始没有达到范围之前，在自己原来位置上类似于相对定位。当达到闯值时，变成固定定位，根据父级定位。）绝对定位脱离文档，文本流。当没有父级或者父级没定位，根据窗口定位。当父级有定位，会根据父级定位。定位: （position） （position: static；）默认定位就是根据普通流定位。3、固定定位：根据窗口定位，定位后就固定不动了。
css---相对定位+绝对定位实现元素居中
string佳佳的博客
03-29 2455
效果图 实现方式 <view class="img-wrap"> <image mode="aspectFill" class="img-bg" src="{{userInfo.avatarUrl}}"></image> <view class="info-wrap"> <image src="{{userInfo.avatarUrl}}" /> <view
CSS中相对定位和绝对定位详解
ning的博客
01-20 2977
在CSS布局中，定位是一种强大的工具，可以帮助我们精确地控制元素在页面中的位置。相对定位和绝对定位是两种常用的定位方式，它们在实际开发中有着广泛的应用。本文将详细解析这两种定位方式的原理、使用方法以及它们之间的区别。相对定位是将元素相对于其在文档流中的原始位置进行偏移。使用相对定位的元素不会脱离文档流，它仍然占据原来的空间，只是视觉上发生了位置变化。HTML复制 在上述代码中， 使用了相对定位，它相对于原始位置向下偏移了 ，向右偏移了 ，但其他元素仍然按照 在原始位置时的布局进行排列。绝对定位的元素会脱离
CSS基础-position: absolute绝对定位的默认位置
m0_51757444的博客
05-13 1557
绝对定位position的值为absolute时的默认位置 前言 今天上午练习定位时发现了这么一个东西： 元素设置为绝地定位后不给它添加top时是正常的我想要的结果； 添加top后还需要精确的计算。 正文 感觉你也应该开始好奇默认值是啥了，来一起看看吧： 比如这是我想要的效果 很简陋，但是调试嘛，就先这样吧，不要嫌弃~ 当我鼠标放上去时“阳阳”两个字的下面出现红色的块块， html代码是这样的： <body> <ul> <li class="it
CSS相对定位和绝对定位
热门推荐
m0_46527751的博客
04-06 1万+
CSS相对定位和绝对定位相对定位绝对定位没有父盒子有父盒子时 文章参考进行了一定修改添加 相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。 相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种： 值 描述 absolute 使元素绝对定位，相对于static定位以外的最近的一个祖先元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 使元素相对定位，相对于自己的
CSS进阶4---定位方式
持之以恒
02-27 5660
搞懂css定位，css就没啥其它难点了。
CSS - 绝对定位 子元素受父元素影响 无法宽度自适应
Android、HTML、CSS、JS、JAVA、Kotlin、PHP等技术
01-23 1778
父父元素设置固定宽度父元素没设置宽度 （相对定位） position: relative; 子元素没设置宽度 （绝对定位） position: absolute; 问题： 子元素想设置自适应宽度，可是受父元素影响，继承了父元素宽度 无法撑开到超过父元素的宽度解决：子元素 display: inline-block; white-space: nowrap; //强制撑开
CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例
HRDMN的博客
05-18 2093
本文介绍了绝对定位（position: absolute），完成了一个学校官网导航栏实例。绝对定位是CSS中一种强大的定位方式，它允许元素脱离正常的文档流，相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）定位。大家记得勤练习！
CSS z-index 层级关系优先级的概念
12-13
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...
css教程之绝对定位使用详解
12-13
如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位绝对是快刀斩乱麻，因为绝对定位可以使一个对象脱离正常的文档流，好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
style.width是指dev的宽度还是指dev宽度+内边距
qq_40453972的博客
11-21 319
CSS盒模型有两种类型：标准盒模型（默认）和边框盒模型。标准盒模型中，width仅定义内容宽度，总宽度=width+padding+border。边框盒模型中，width包含内容、内边距和边框的总宽度。现代开发更推荐使用边框盒模型（通过box-sizing:border-box设置），因其布局计算更直观。默认情况下style.width不包含内边距，但在边框盒模型中包含。
css3之网格布局1
2301_81968528的博客
11-24 214
摘要：CSS Grid布局是一种二维网格系统，通过将页面划分为网格单元来实现复杂布局。通过在容器元素设置display:grid开启网格布局，其子元素成为网格项。主要属性包括：grid-template-columns/rows定义列宽/行高（支持px、%、fr等单位及minmax()、repeat()函数）；grid-column/row-gap设置网格间距；支持网格线命名实现精确定位。网格布局通过简洁的CSS代码即可创建灵活的响应式布局结构。
flex垂直布局，容器间距相等
最新发布
weixin_44601930的博客
11-25 122
【代码】flex垂直布局，容器间距相等。
Vue开发工具使用技巧
2509_93946471的博客
11-24 237
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
Python全栈开发项目——AI智能聊天机器人
qiao_yue的博客
11-24 581
本项目实现了AI聊天功能，具有语音输入和聊天背景自定义等亮点功能
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

python_198

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值