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. 绝对定位(固定定位)会完全压住盒子

相关推荐
在无清风28 分钟前
Java实现Redis
前端·windows·bootstrap
_一条咸鱼_2 小时前
Vue 配置模块深度剖析(十一)
前端·javascript·面试
yechaoa3 小时前
Widget开发实践指南
android·前端
前端切图仔0013 小时前
WebSocket 技术详解
前端·网络·websocket·网络协议
JarvanMo4 小时前
关于Flutter架构的小小探讨
前端·flutter
前端开发张小七4 小时前
每日一练:4.有效的括号
前端·python
顾林海4 小时前
Flutter 图标和按钮组件
android·开发语言·前端·flutter·面试
雯0609~5 小时前
js:循环查询数组对象中的某一项的值是否为空
开发语言·前端·javascript
bingbingyihao5 小时前
个人博客系统
前端·javascript·vue.js
尘寰ya5 小时前
前端面试-HTML5与CSS3
前端·面试·css3·html5