CSS中绝对定位

1.如何设置绝对定位?

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

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

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

参考他的包含块.

什么是包含块?

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

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

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

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

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

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

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

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

相关推荐
Kevin Wang72738 分钟前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic41 分钟前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年43 分钟前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala1 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20081 小时前
前端-ES6-11
前端·es6
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年2 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
代码改变世界100862 小时前
像素策略游戏:资源战争
css·游戏·css3
文火冰糖的硅基工坊3 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088503 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring