浮动与绝对定位能混用吗

1.浮动和相对定位可以混用

经常用于父元素通过浮动定位，而其子元素需要绝对定位，这个时候就需要将父元素设置为相对定位，这时相对定位并不会改变浮动属性。

2.浮动和绝对定位不能混用

一旦混用浮动和绝对定位，则绝对定位会使浮动属性失效

• div｛float :left;position:relative｝这样是可以的
• div｛float :left;position:absolute｝不允许，绝对定位会使浮动失效

3.一个块浮动和另一个块绝对定位的z轴位置

绝对定位块不设置z-index值的情况下，绝对定位块会在浮动块的上方，而设置z-index: -1；之后，浮动块就会在绝对定位块的上方。

4.绝对定位的位置变化

• 只设置position: absolute;而不设置其位置时，元素会保持在其原来的位置
• 设置position: absolute; left: 0; ，元素水平方法上进行定位，垂直方向上保持不变，这里的left是元素外边框到其定位基准元素的内边框的距离，元素的最终位置还会受到其margin的影响

<div class="out">
        <div class="in"></div>
    </div>

.out{
            position: relative;
            width: 100px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            background-color: silver;
            border: 10px solid black;
        }

        .in{
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0;
            margin: 10px;
            background-color: pink;
            border: 5px solid red;
        }

最终效果图：