当前位置: 首页 > news >正文

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【Linux】——进程概念(万字解读)
  • 【嵌入式linux开发】智能家居入门6:最新ONENET,物联网开放平台(QT、微信小程序、MQTT协议、ONENET云平台、旭日x3派)
  • Linux环境下运行介绍
  • 51单片机学习
  • 第八季完美童模全球总冠军·韩嘉潞 破浪扬帆写就传奇
  • INSTALLMENT MORTGAGE
  • Mac升级系统文件都丢了怎么办?Mac更新后资料找不到了怎么恢复
  • 【ARM 芯片 安全与攻击 6 -- ARM 中的 PAC 是什么?】
  • 2024年电赛H题全开源
  • 深度学习(YOLO、DETR) 十折交叉验证
  • 一个简单的Rtmp推流客户端(QT录音,OpenCV摄像,FFmpeg编码推流)
  • 模糊Smith智能控制方法的研究 及其单片机实现
  • 打造聊天流式回复效果:Spring Boot+WebSocket + JS实战
  • Python办公自动化:初识 `openpyxl`
  • Ubuntu离线安装库并解决依赖关系
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • ES2017异步函数现已正式可用
  • JavaScript函数式编程(一)
  • nfs客户端进程变D,延伸linux的lock
  • Objective-C 中关联引用的概念
  • Python进阶细节
  • uva 10370 Above Average
  • 持续集成与持续部署宝典Part 2:创建持续集成流水线
  • 从0到1:PostCSS 插件开发最佳实践
  • 大型网站性能监测、分析与优化常见问题QA
  • 翻译--Thinking in React
  • 构造函数(constructor)与原型链(prototype)关系
  • 坑!为什么View.startAnimation不起作用?
  • 聊聊hikari连接池的leakDetectionThreshold
  • 前端 CSS : 5# 纯 CSS 实现24小时超市
  • 如何胜任知名企业的商业数据分析师?
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 如何在GitHub上创建个人博客
  • 使用Tinker来调试Laravel应用程序的数据以及使用Tinker一些总结
  • 数据仓库的几种建模方法
  • 移动端高清、多屏适配方案
  • ​Spring Boot 分片上传文件
  • ​卜东波研究员:高观点下的少儿计算思维
  • #etcd#安装时出错
  • #单片机(TB6600驱动42步进电机)
  • (3)选择元素——(17)练习(Exercises)
  • (delphi11最新学习资料) Object Pascal 学习笔记---第14章泛型第2节(泛型类的类构造函数)
  • (pycharm)安装python库函数Matplotlib步骤
  • (vue)页面文件上传获取:action地址
  • (zt)基于Facebook和Flash平台的应用架构解析
  • (办公)springboot配置aop处理请求.
  • (附源码)springboot金融新闻信息服务系统 毕业设计651450
  • (离散数学)逻辑连接词
  • (学习日记)2024.04.10:UCOSIII第三十八节:事件实验
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (一)UDP基本编程步骤
  • (一)WLAN定义和基本架构转
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (自用)learnOpenGL学习总结-高级OpenGL-抗锯齿
  • .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划