网页布局“三层元素叠加”--使用z-index来改变网页中元素的堆叠顺序
前言：最近，在写网页的时候，有遇到一个三级堆叠的视觉效果，再次回顾一下层模型，absolute和z-index的相关知识，再此mark一下。
一、视觉设计稿和相关布局分析
网页的UI设计稿如下所示：
网页层模型采用顺序流，使用absolute定位，通过top来上移位置，使用z-index实现堆叠效果。此时，网页在窗口进行缩放时，中间白色主体部分始终居中显示，网页整体高度保持不变。
二、相关代码解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线预约平台</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
html,body {
padding: 0;
margin: 0;
background: #f7fdfe;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
background-attachment: fixed;
-webkit-text-size-adjust: none;
}
.head-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 618px;
background: url(images/header-bg.png) no-repeat center;
background-size: cover;
z-index: 3;
}
.box {
position: absolute;
top: 618px;
width: 100%;
background: #f7fdfe;
}
.content {
position: absolute;
top: -80px;
padding-top: 80px;
width: 1200px;
height: 1200px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
z-index: 2;
background: #ffffff;
}
.footer {
position: absolute;
width: 100%;
height: 387px;
top: 900px;
background: url(images/foot-bg.png) no-repeat center;
background-size: cover;
z-index: 1;
}
</style>
</head>
<body>
<div class="body-bg">
<div class="head-img"></div>
<div class="box">
<div class="content"></div>
<div class="footer"></div>
</div>
</div>
</body>
</html>①在html中，head-img，content和footer，三部分都采用position:absolute进行绝对定位，通过top来上移位置，实现顺序排列，同时，它们给出固定的高度；②在定位以后，堆叠效果可以通过z-index来实现排列；③包裹content和footer的盒子box，不给出高度，absolute定位以后，通过top下移到head-img页面头部背景图片下方；
④content主体内容始终居中显示，通过transform()函数实现。在absolute定位以后，用left:50%左移50%，transform:trasnslateX(-50%)，使元素在当前位置分别往x轴负向平移自身宽高的一半距离。
三、总结
通过这次布局，对堆叠顺序z-index有了更清楚的认识，此布局中，控制三部分的总体高度保持固定是关键，主体内容居中显示，对于div水平垂直居中显示，有一定的借鉴意义。可以参考之前的博客，《CSS布局方式--水平垂直居中》点开链接 。
参考博客：CSS布局方式--水平居中、垂直居中、水平垂直居中 https://blog.csdn.net/qq_26780317/article/details/80899402
版权声明：本文为博主原创文章，未经博主允许不得转载 。https://blog.csdn.net/qq_26780317/article/details/82190825