如何利用CSS堆定位元素位置
网络整理 - 07-27
利用CSS定位Web页面上的元素有很多需要注意的地方，当你需要一个元素出现在另一个元素的位置时，经常会突然出现有趣的场景。使用CSS的z-index属性控制元素的堆放可以很容易的解决这个问题。本文为大家详细介绍CSS堆放元素的使用。
定位
元素的堆放顺序依赖于CSS的定位方面。有三种定位方式可供选择：相对定位、绝对定位和固定位置。
定位元素需要指定偏移值。这些偏移通过使用顶部、左边、右边和底部样式属性来指定。每个值被解释为相应元素的外部边缘根据它原来的位置应该移动距离。
列表A中的例子包含了相对定位和绝对定位。页面使用绝对定位和百分比值被水平分为三部分。文本使用相对定位放置在每部分中。（如果你想查看代码，请点击列表A的链接）
<html><head>
<title>CSS Positioning </title>
<style>
DIV#top
DIV#middle
DIV#bottom
.title
</style></head><body>
<div id="top">
<div class="title">This is a test</div>
</div>
<div id="middle">
<div class="title">Place some text here.</div>
</div>
<div id="bottom">
<div class="title">Thanks for visiting!</title>
</div>
</body></html>
当使用CSS定位在一个页面放置多个元素时，不可避免的会出现两个或更多元素占用页面相同位置的情况。