CSS定位

大家好，我是逆战班的一名学员，今天我来给大家分享一下CSS定位这个属性的相关知识！

      CSS定位往往在页面布局中起到了美化的作用，定位也分为多种方式，定位属性用于检索或设置对象的定位方式。

      对于定位机制来说，有决定上下排列布局的普通流、左右排列布局的浮动流、还有叠加排列布局的定位流，多数情况下都会用到这些机制。定位属性（position）也有五种属性值：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、粘性定位（sticky）。接下来我们具体了解一下这几种定位属性。

静态定位（static）

        static 是默认值，没有定位效果，还可以用于取消元素之前的定位设置；一般情况下，不添加任何定位属性都属于静态定位。

相对定位（relative）

        相对定位的参照物是其本身所在的位置。若没有设置定位偏移量，对元素本身的位置不会产生影响；定位偏移后，原有的空间会被保留，元素不会脱离文档流，而且也不会影响其他元素布局。

           定位前               定位后

绝对定位（absolute）

       绝对定位的参照物是该元素的祖先级元素。当该元素的父元素设置了定位属性，它就会以该父元素为参考进行定位；若它的上一级父元素没有设置定位属性，那么就看这个父元素的父元素是否设置定位属性，倘若所有祖先级元素都没有设置定位属性，则会相对于文档body来定位（即可视窗口）。如果祖先元素中有多个元素具备定位模式，那么是相对离自己最近的祖先元素进行偏移。

           定位前            定位后

绝对定位的特点是元素完全脱离文档流，会使内联元素具备块特征以此来支持宽高的设置；也会使块元素具备内联的特征让其默认宽根据内容决定。

固定定位（fixed）

       固定定位始终都是相对于整个浏览器窗口进行定位，它不受浏览器滚动条和祖先元素的影响，同时还将具备了绝对定位的特点。

粘性定位（sticky）

       元素在没有到达指定位置时，不具备定位效果，到达指定位置，会变成固定模式。

附：与定位搭配使用的z-index : auto |number

        用于检索或设置对象的层叠顺序，，取值可正可负，在多个元素叠加显示时，number数值越大，元素越靠上层。只针对具有定位属性的元素起作用。

这次的介绍就到这了，希望对大家有所帮助，谢谢！