一篇文章看懂css中的定位

CSS 有一些属性用来定位，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠。CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

一、普通流

除非专门指定，否则所有元素都在普通流中定位。普通流中元素框的位置由元素在HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

二、几种改变定位的属性

定位的方向：left | right | top | bottom

属性：position absolute | fixed | relative | static | inherit

１、相对定位(relative)：是普通流定位的一种，定位的元素在原本的位置上，相对这个位置进行移动，不管在怎么移动，改元素原本的坑他还是要占着，同时会导致元素的覆盖叠加

2、绝对定位(absolute)：该方法会让元素脱离普通文档流，相对于离他最近的，已定位的祖先元素定位。如果没有已定位的祖先元素，那么它的位置就相对于最初的包含元素。它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制层级

3、inherit：从父元素继承 position 属性的值（用的少）

4、static：默认值。没有定位，元素出现在正常的流中（用的少）

5、固定定位(fixed)：定位参考的是body，忽略页面长度，永远相对于浏览器窗口进行定位，网页悬浮广告就可以用它来做。

今天的分享就到这里了，大家看完后学会了吗？

欢迎评论留言，提供建议和思路，如果觉得文章对您有用就加个关注啦~~