CSS中绝对定位

1.如何设置绝对定位?

给元素设置postition: absolute 即可实现绝对定位

可以使用left,right,top,bottom四个属性调整位置

2.绝对定位的参考点在哪里?

参考他的包含块.

什么是包含块?

1.对于没有脱离文档流的元素:包含块就是父元素;

2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没有定位,那包含块就是整个页面)

3.绝对定位元素的特点:

1.脱离文档流,会对后面的兄弟元素,父元素有影响;

2.left不能和right一起设置,top和bottom不能一起设置;

3.绝对定位,浮动不能同时设置,如果同时设置,浮动失效,以定位为主.

4.决定定位的元素,也能通过margin调整位置,但不推荐这样做.

5.无论是什么元素(行内,行内块,块级)设置为绝对定位之后,都变成了定位元素(定位元素默认宽和高是被内容撑开,且能自由设置宽高.).

相关推荐
Muen12 分钟前
iOS设计模式-外观Facade
前端
Cobyte35 分钟前
21.Vue Vapor 组件的实现原理
前端·javascript·vue.js
前端双越老师36 分钟前
我从 0 开发的 AI Agent 智语项目发布了
前端·node.js·agent
橙某人38 分钟前
LogicFlow 工作流撤销与重做:从「全量快照」到「命令模式」🎯
前端·vue.js
铁皮饭盒1 小时前
Rust版Bun1.4之前, 盘点Bun1.3新特性
前端·javascript·后端
恋猫de小郭1 小时前
如何让 AI 快速搭建一套生产 Agent ?全面理解 Agent 架构。
前端·人工智能·ai编程
Csvn1 小时前
Vite 构建缓存优化:二次构建从 15s 降到 2s 的实战方案
前端
晓得迷路了1 小时前
栗子前端技术周刊第 135 期 - Vite 8.1、Rspack 2.1、Babel 8.0...
前端·javascript·vite
你听得到112 小时前
用户说 App 卡,但说不清在哪?我把 Flutter 监控 SDK 升级成了链路观测工作台
前端·flutter·性能优化