css定位机制

最新推荐文章于 2021-10-18 21:42:22 发布

swallow_杨

最新推荐文章于 2021-10-18 21:42:22 发布

阅读量401

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/swallow_y/article/details/80771537

版权

本文详细介绍了CSS中的定位机制，包括文档流的类型及其影响，浮动元素如何脱离文档流以及clear属性的作用，最后深入探讨了相对定位、绝对定位和固定定位的特点与应用场景，强调了在实际布局中子绝父相的使用规范。

摘要由CSDN通过智能技术生成

css定位机制有三种：文档流、浮动（float）、定位（position）

一、文档流（常规流）

什么是文档流

从直观上理解文档流（正常流）指的是元素按照其在HTML中的位置顺序决定排布的过程，主要形式是自上而下，一行接一行，每行从左到右的顺序排列页面元素。

文档流的类型

1.块级元素的块级格式
2.行内元素的行内格式
3.两种元素的相互定位方式

什么情况下会导致元素脱离文档流

浮动（float）
绝对定位(position:absolute\fixed)
这两种的区别在于宽度缺失

由于使用了相对定位和绝对定位的元素都会产生宽度缺失,因此会造成层叠的情况。层叠顺序基本按照后者覆盖前者的顺序。但是如果要改变顺序的话,就需要使用z-index属性。

需要注意的是:z-index只有在position值为relative,absolute和fixed的元素上有效。而其比较的规则遵循“拼爹原则”,即先比较具有z-index属性的父辈元素,父辈元素z-index大的子辈元素都大。

但更需要注意的是:并非使用了absolute来进行定位就一定要设置z-index,大量的z-index会使项目无法维护