前言：
现时我们对“css一个元素在另一个上面”大体比较看重，看官们都需要学习一些“css一个元素在另一个上面”的相关知识。那么小编在网上收集了一些关于“css一个元素在另一个上面””的相关资讯，希望看官们能喜欢，小伙伴们快快来了解一下吧！本文，我们学习经典的三列布局——圣杯布局。
圣杯布局，顾名思义，中间容器高，旁边两侧的容器低，整个布局看上去像一个圣杯。
我们来实现一下。
创建 grail-layout.html 文件和 grail-layout-style.css 文件。在 html 里构建基础代码，引入外部样式。
在 body 里添加一个 div 容器，定义类属性 class="container"。在容器里定义子元素 div，定义类属性 class="main"。在子元素main 里面 添加三个 div 容器，定义样式类分别为 class="center"，class="left"，class="right"，填入一些文本。
HTML <div class="container"> <div class="main"> <div class="center">中</div> <div class="left">左</div> <div class="right">右</div> </div> </div>
在 css 文件里定义基础样式。
CSS* { box-sizing: border-box; margin: 0; padding: 0;}html, body { height: 100%;}定义选择器 .container，声明样式：width: 100%，height: 500px，min-width: 700px。外层容器宽度小于等于700像素，高度固定。
定义选择器 .left，声明样式：height: 200px，background-color:pink。给左侧容器设置固定高度，并添加一个背景颜色。
定义选择器 .center，声明样式：height: 800px，background-color: gold。给中间容器设置固定高度，并添加一个背景颜色。
定义选择器 .right，声明样式：height: 200px，background-color:greenyellow。给右侧容器设置固定高度，并添加一个背景颜色。
CSS.container { width: 100%; height: 500px; min-width: 700px;}.left { height: 200px; background-color:cyan;}.center { height: 800px; background-color: gold;}.right { height: 200px; background-color:greenyellow;}在浏览器里预览一下效果。
回到 css，定义选择器 .main，声明样式：padding: 0 300px 0 200px，给左右两侧的容器留出空间。
看一下效果。左边留出 200px 间隙，右面留出 300px 间隙。
CSS.main { padding: 0 300px 0 200px;}下一步，我们要做的就是将左右两个子元素，放置到左右两个间隙处，这里需要用到浮动和负margin。给 left 添加样式 float: left，width: 200px，使左侧容器左浮动，宽度等于间隙的大小。给 center 添加样式 float: left，width: 100%，使中间容器也左浮动，宽度撑满父容器。
CSS.left { float: left; width: 200px;}.center { float: left; width: 100%;}我们看，因为中间容器宽度为 100%，左侧容器折行到了下面。
因为中间容器宽度为 100%，外层容器已经装不下左侧容器，只能折行显示到下面。想要实现左侧容器回到页面左上角，只需要将左侧容器向左移动 父容器宽度即可。
回到 css，我们就给 left 添加一样式 margin-left: -100%。
再看一下效果，左侧容器盖在了中间容器上面，但它的位置应该在屏幕的左上角。
继续给 left 添加样式：position: relative，right: 200px，再让它向左移动 200px。
这样，左侧容器的布局就完成了。接下来调整右测容器的布局。
和左侧容器一样的思路，给 right 添加样式：float: left，width: 300px，margin-right: -300px。
看一下最终效果，当缩放窗口时，左右两个容器固定不动，中间容器自适应。到这儿，圣杯布局就大功告成了！
关于圣杯布局有一点需要注意：由于三个子元素都是浮动的，撑不开父元素的高度，这就需要给父元素设置固定高度，或者做浮动的清理。
有关经典的三列布局——圣杯布局，就讲完了。最后布置一个作业，根据屏幕上提供的 html 结构，完成另一个经典的三列布局——双飞翼布局效果。
双飞翼布局和圣杯布局最大的不同就是，它多了一个包裹着中间元素的容器。当给 container 容器添加了边框后，要求左右两个容器在边框内部排列。
HTML<body> <div class="container column"> <div class="center">中</div> </div> <div class="left column">左</div> <div class="right column">右</div></body>
文章配套教程链接：
标签： #css一个元素在另一个上面
