html - 在 2 个 div 容器之上创建按钮

Question

我正在创建一个页面堆积网页，其中该部分的背景颜色是通过 CSS 设置的渐变色。我为这部分的底部创建了一个灰色的 div，但我正在努力的是将 3 个按钮放置在灰色和橙色之上。这部分是如何完成的？

也可以在底部制作灰色条而不是页面的页脚吗？我只希望它对这部分可见，而不是对其他部分可见。

我希望它看起来像什么的预览在这里:

Answer 1

使用一个 div 作为容器，两个内部 div 作为上下一个(橙色和灰色)，最后，一个 table , 绝对定位在容器 div 按钮如何在容器内同样居中。

.cnt
{
    position:relative;
    width:100%;
    box-sizing:border-box;
    display:block;
    height:250px;
}
.div1
{
    width:100%;
    height:50%;
    background-color:orange;
    display:block;
}
.div2
{
   position:relative;
    width:100%;
    height:50%;
    background-color:gray;
    display:block;
}
.divC
{
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    background-color:transparent;
}
.divC td {text-align:center;vertical-align:middle;}

.btn
{
    height:150px;
    width:150px;
    border-radius:75px;
    background-color:red;
    display:inline-block;
    border:solid 1px red;
    cursor:pointer;
}

<div class="cnt">
    <div class="div1"></div>
    <div class="div2"></div>
    <table cellpadding="0" cellspacing="0" class="divC">
         <tr>
             <td><input type="button" class="btn" value="Button1"></td>
             <td><input type="button" class="btn" value="Button2"></td>
             <td><input type="button" class="btn" value="Button3"></td>
        </tr>
    </table>
</div>

更改容器的高度和按钮的大小(宽度和高度，其中1/2用于border-radius 得到圆圈按钮)。

更新:

有 fiddle 示例仅使用一个 div(由橙色和灰色着色，无渐变)和一个用于 buttons 的 table。只需稍作改动即可获得相同的结果。