HTML5 定位网页元素

1. 定位(position)

position:static(标准)

position:relative(相对定位)

偏移量的方向

相对定位的规律

浮动元素设置相对定位

position:absolute(绝对定位)

绝对定位的规律

绝对定位不偏移

2. 固定定位(fixed)

可以发现,给body加了高度后,绝对定位div1跑到body的右下角了,而固定定位div2依旧在浏览器框的右下角。

3. 三种定位的特性

相对定位(relative)

绝对定位(absolute)

固定定位(fixed)

4. 重叠优先级(z-index)

5. 网页元素透明度(opacity)

6. 总结

相关推荐
借个火er1 分钟前
React 19 源码全景图:从宏观到微观
前端
张清悠2 分钟前
CSS引入外部第三方字体
前端·javascript·css
追逐梦想之路_随笔4 分钟前
手撕Promise,实现then|catch|finally|all|allSettled|race|any|try|resolve|reject等方法
前端·javascript
张较瘦_5 分钟前
前端 | 吃透CSS视觉特效:圆角、渐变、动画与变换核心解析
前端·css
Tzarevich6 分钟前
Tailwind CSS:原子化 CSS 的现代开发实践
前端·javascript·css
借个火er6 分钟前
React 19 源码揭秘(二):useState 的实现原理
前端
YaeZed37 分钟前
Vue3-插槽slot
前端·vue.js
杨进军38 分钟前
如何实现划词效果
前端·javascript
前端老爷更车39 分钟前
esp32 小智AI 项目
前端
destinying40 分钟前
五年前端,我凌晨三点的电脑屏幕前终于想通了这件事
前端·javascript·vue.js