多个块级元素在水平方向占位置，实现在窗口变大变小的同时，四个图片依然会随之而动，从而显示响应式的效果...

原理：块级元素想要在页面水平和垂直方向都居中:先让元素定位(绝对定位)，然后水平方向上面:left=50%,margin-left=-(1/2*width)

垂直方向页面居中:top=50%,margin-top=-(1/2*height)

代码如下:

<div class="footer_top">
    <div class="footer_slogen">
        <span class="one"><img src="images/slogen1.png" alt=""/></span>
        <span class="two"><img src="images/slogen2.png" alt=""/></span>
        <span class="three"><img src="images/slogen3.png" alt=""/></span>
        <span class="four"><img src="images/slogen4.png" alt=""/></span>
    </div>
    <div class="footer_product"></div>
</div>

 

.footer_top{
    position: relative;
}
.footer_slogen span{
    position: absolute;
    left: 50%;
}
.footer_slogen .one{
    margin-left: -605px;
}
.footer_slogen .two{
    margin-left: -294px;
}
.footer_slogen .three{
    margin-left: 0px;
}
.footer_slogen .four{
    margin-left: 316px;

}

注意：(1)、在绝对定位后，没有给lrtb值，默认会以原来的标准流中的位置显示。

(2)、关于四个图形的层级都一样叠加在了一起（ 只有相对定位和绝对定位和固态定位 的元素才有层级的概念,浮动和标准流是没有层级的概念的,如果定位了几个相邻的元素在同一个位置

后面的元素会压在前面的元素上面，但是z-index都是0）

(3)、在百分比定位里，没有margin-right的用法

转载于:https://www.cnblogs.com/zhengqiu/p/5739045.html