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. 总结

相关推荐
JayceM1 小时前
Vue中v-show与v-if的区别
前端·javascript·vue.js
HWL56791 小时前
“preinstall“: “npx only-allow pnpm“
运维·服务器·前端·javascript·vue.js
德育处主任2 小时前
p5.js 掌握圆锥体 cone
前端·数据可视化·canvas
mazhenxiao2 小时前
qiankunjs 微前端框架笔记
前端
无羡仙2 小时前
事件流与事件委托:用冒泡机制优化前端性能
前端·javascript
秃头小傻蛋2 小时前
Vue 项目中条件加载组件导致 CSS 样式丢失问题解决方案
前端·vue.js
CodeTransfer2 小时前
今天给大家搬运的是利用发布-订阅模式对代码进行解耦
前端·javascript
睡不着先生2 小时前
`text-wrap: balance` 实战指南:让多行标题自动排版更优美
css
阿邱吖2 小时前
form.item接管受控组件
前端
韩劳模2 小时前
基于vue-pdf实现PDF多页预览
前端