CSS定位有哪几种方式

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，解决左右排列的问题，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

1.定位能够解决的问题

     定位主要解决浮动带来的左右排列问题和定位叠加排列的问题

2.position的取值

• static：默认取值
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位
• sticky：黏性定位

3.定位取值详解

3.1相对定位

 #box{ width: 321px; height: 321px; border: 1px solid #ff0000;
        position:relative; left: 60px; top:50px;}

    相对定位不会使元素脱离文档流，也不会影响其他元素的布局。定位偏移量是相对元素自身进行偏移

3.2绝对定位

#box2{width: 50px;height: 50px;background-color: black;
position: absolute;left: 50px;top: 10px;}

绝对定位元素完全脱离文档流。如果有定位祖元素则相对于定位祖元素发生偏移，没有定位祖元素相对于整个文档发生偏移。

3.3固定定位

固定定位使元素完全脱离文档流，相对于整个浏览器窗口进行偏移，不会受到浏览器滚动条的影响也不会受到祖元素的影响

3.4黏性定位

在没有达到指定位置时，是没有定位效果的，到达指定位置就变成了固定模式。

4.定位层级 z-index

定位层级主要用于解决嵌套时的层级问题，默认的层级为0。

#box1{ position: relative; z-index: 1;}
    #box2{ width:100px; height: 100px; background:red; position: absolute; left:0; top:0; z-index: 3;}
    #box3{ width:100px; height: 100px; background:blue;  position: absolute; left:50px; top:50px; z-index: 2;

<div id="box1">
        <div id="box2"></div>
    </div>
    <div id="box3"></div>

在比较层级的时候，会先跟同级别的先比较。
比较条件：必须有定位模式和 z-index