如何利用CSS堆定位元素位置

时间:2008-10-06 10:51:25  来源:第二电脑网上收集  作者:

  第二电脑网导读:index属性控制元素的堆放可以很容易的解决这个问题。本文为大家详细介绍CSS堆放元素的使用。定位元素的堆放顺序依赖于CSS的定位方面。有三种定位方式可供选择:相对定位、绝对定位和固定位置。相对定位:定位元素通过侧偏移属性进行移动。当一个项目是相对定位时,这时会...
  正文:

利用Css定位Web页面上的元素有很多需要注意的地方,当你需要一个元素出现在另一个元素的位置时,经常会突然出现有趣的场景。使用CSS的z-index属性控制元素的堆放可以很容易的解决这个问题。本文为大家详细介绍CSS堆放元素的使用。

定位

元素的堆放顺序依赖于CSS的定位方面。有三种定位方式可供选择:相对定位、绝对定位和固定位置。

  • 相对定位:定位元素通过侧偏移属性进行移动。当一个项目是相对定位时,这时会创建一个包含块将所有该项目的子项目包含其中。该块与元素的定位位置相一致,这样就可以相对一个元素的父元素来定位它,因为它的父元素的位置已经确定了。
  • 绝对定位:当元素绝对定位时,它们就被完全从页面的其它元素流中移除;也就说与绝对定位元素根据包含它们的块定位,边缘使用侧偏移属性定位。绝对定位的元素不随其它元素浮动,其它元素也不围绕它浮动。因此,一个绝对定位的元素可能会覆盖其它元素。
  • 固定位置:固定位置的元素和绝对定位模型类似,但是固定位置元素被完全从文档中移除,不与文档中的任何元素有相对位置。使用定位置定位,你可以仅使用CSS就可以创建类似HTML框架的接口。

定位元素需要指定偏移值。这些偏移通过使用顶部、左边、右边和底部样式属性来指定。每个值被解释为相应元素的外部边缘根据它原来的位置应该移动距离。

列表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定位在一个页面放置多个元素时,不可避免的会出现两个或更多元素占用页面相同位置的情况。


"如何利用CSS堆定位元素位置"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/2086.html


关键字:

关于《如何利用CSS堆定位元素位置》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td