CSS学习摘要-定位实例
注：全文摘自MDN-CSS定位实例
列表消息盒子
我们研究的第一个例子是一个经典的选项卡消息框，你想用一块小区域包括大量信息时，一个非常常用的特征。这包括含有大信息量的应用，比如策略战争游戏，比如从移动版的网页，屏幕狭小、空间有限；比如你可能想要放置许多信息的紧凑消息框，不用就会充满整个UI。我们简单的例子完成后就会像下面这样：
注意： 你能看完整的示例，可运行在 info-box.html (source code)。检出它以理解你在本文章里要建立什么。
你可能会想：”为什么不仅仅做独立的选项卡为一个独立的网页，然后通过点击不同的标签来在不同的页面跳转来达到这个效果？“这样代码可能会简单一些，是的。但是这样每个独立的”页面“视图将会实际上是一个新加载的网页，跨视图更难保存信息，并把这个特征融入一个更大的UI设计。另外，所谓的”单页应用“正在变得非常流行——尤其是移动网页UI——因为把一切的服务放在一个单独的文件上可以减少HTTP请求的数量来浏览所有内容，从而提高性能。
注意： 一些网络开发者甚至更超前，每次只加载一页的信息，并且使用java script诸如 XMLHttpRequest特征动态改变信息显示。在你学习的此刻，然而，我们希望尽可能保持简单。接下来有一些java script，但是只有一点。
在开始之前，我们需要你拷贝文件到本地，当作起始的HTML文件—— info-box-start.html. 保存到你的计算机合适的位置，然后在你的编辑器里打开。让我们看看包含在 body 里的HTML代码：
<section class="info-box">
<ul>
<li><a href="#" class="active">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="panels">
<article class="active-panel">
<h2>The first tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
</article>
<article>
<h2>The second tab</h2>
<p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
</article>
<article>
<h2>The third tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
<ol>
<li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
<li>Aliquam ut porttitor urna.</li>
<li>Nulla facilisi</li>
</ol>
</article>
</div>
</section>这样我们已经得到了一个<section>元素带有类（class）为 info-box。此元素又包含一个 <ul> 和一个 <div>。无序列表包含三个列表项，列表项有链接在内，实际上将成为用于点击后显示内容面板的选项卡。 div 包含三个<article> (<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。) 元素，构成对应于每个选项卡的内容面板。 每个面板包含一些示例内容。
这里的思路是我们将样式化选项卡看起来是一个标准的水平导航菜单，使用绝对定位样式化面板互相坐落其顶上。我们也给你一点java script包含到你的页面上，当选项卡被按下时，显示对应的面板，并且样式化选项卡本身。你不需要在这个阶段了解java script本身，但是你应该尽快学习一些基本的 java script——你的用户界面越复杂，越需要一些java script来实现你渴望的功能。
一般设置
开始前，在<style>开闭标签之间添加下面的代码：
html {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}这只是一些一般设置，在我们页面上设置了无衬线的字体、使用 box-sizing 模型，去掉 <body> 默认外边距。
下一步，在你早先的CSS下面加入如下代码：
.info-box {
width: 450px;
height: 400px;
margin: 0 auto;
}这对内容设置具体的高度和宽度、在屏幕居中使用老把戏 margin: 0 auto 。在早先的课程中我们建议尽可能不固定内容容器的高度。这个情况下是可以的，因为我们是在选项卡中固定的内容，如果每个标签都有不同的高度，看起来也有些不和谐。
样式化我们的选项卡
现在我们希望样式化选项卡看上去像选项卡——基本，这些是一个水平的导航标签，但不是点击之后加载不同的网页，和我们之前在课程中见到的不同，相反，