CSS中绝对定位

1.如何设置绝对定位?

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

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

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

参考他的包含块.

什么是包含块?

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

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

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

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

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

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

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

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

相关推荐
随笔记8 分钟前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
陈随易18 分钟前
国产之光,把AI融入到语言级别的编程语言-MoonBit
前端·后端·程序员
鹏程十八少28 分钟前
9. Android 精通Android高级UI总结:自定义View与动画开发终极实战指南
前端
xianxin_33 分钟前
HTML 区块
前端
江城开朗的豌豆34 分钟前
让页面"记住自己"——前端状态保留实战技巧
前端·javascript·vue.js
xianxin_35 分钟前
HTML 布局
前端
一千柯橘39 分钟前
Milkdown:重塑 Markdown 编辑体验的开源利器【实时预览你的 markdown 内容】倍儿爽!
前端·开源·markdown
于慨42 分钟前
uniapp上传文件
前端·uni-app
安然dn44 分钟前
极简实战:React + Vue 微前端(Qiankun + Vite)
前端·vue.js
Electrolux1 小时前
使用 Semantic Release 实现 NPM 全自动发版 monorepo 和 单仓库 项目
前端