css-定位

1.为什么需要定位

以下效果,标准流或浮动都无法快速实现,此时需要定位来实现。

1. 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.

2. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。

**2.**定位组成

1. 定位模式

2.偏移量

3.静态定位 static(了解)

4.相对定位 relative(重要)

5.绝对定位 absolute(重要)

子绝父相

因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位

6.固定定位 fixed(重要)

固定定位小技巧: 固定在版心右侧位置。

7.粘性定位 sticky(了解)

8.定位的总结

9.定位叠放次序 z-index

10.定位的拓展

1. 绝对定位的盒子居中

2. 定位特殊特性

3. 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

4. 绝对定位(固定定位)会完全压住盒子

相关推荐
吕永强17 分钟前
HTML表单标签
前端·html·表单标签
范特西是只猫34 分钟前
echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】
前端·javascript·echarts
麒麟而非淇淋40 分钟前
AJAX 进阶 day4
前端·javascript·ajax
图灵苹果40 分钟前
【个人博客hexo版】hexo安装时会出现的一些问题
前端·前端框架·npm·node.js
Smart-Space1 小时前
HtmlRender - c++实现的html生成类
c++·html
IT-陈2 小时前
app抓包 chrome://inspect/#devices
前端·chrome
hahaha 1hhh5 小时前
Long类型前后端数据不一致
前端
Python私教7 小时前
Go语言现代web开发13 方法和接口
前端·数据库·golang
ForRunner1238 小时前
2024 年最佳 Chrome 验证码扩展,解决 reCAPTCHA 问题
前端·chrome
AiFlutter8 小时前
Flutter Web首次加载时添加动画
前端·flutter