说明

对于制作网页几乎都要用到圣杯或者双飞翼布局，所以在该网页里我用了圣杯布局，将整体分为头部、主体和页尾.

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

在这最重要的是应用position的语法

position:static|relative|absolute|fixed|inherit

我的难点

将圈出的部分实现，我的代码只能实现将一个子元素覆盖父元素的一部分，但是不能将内容放上去

<div class="box">
    <div class="son"></div>
</div>

.box{
            width: 80%;
            height: 200px;
            margin-left: 125px;
            margin-top: 0px;
            background: orange;
            color: wheat;
            font-size: 40px;
            position: relative;
            top: 650px;
    }
.son{
            width: 500px;
            height: 150px;
            background: white;
            position: relative;
            top: 25px;
            left: 50%;
    }

以及实现效果