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

html-css020

如何利用CSS堆定位元素位置,第1张

使用CSS的 z-index属性控制元素的堆放可以很容易的解决这个问题。本文为大家详细介绍CSS堆放元素的使用。定位 元素的堆放顺序依赖于CSS的定位方面。有三种定位方式可供选择：相对定位、绝对定位和固定位置。 相对定位：定位元素通过侧偏移属性进行移动。当一个项目是相对定位时，这时会创建一个包含块将所有该项目的子项目包含其中。该块与元素的定位位置相一致，这样就可以相对一个元素的父元素来定位它，因为它的父元素的位置已经确定了。

绝对定位：当元素绝对定位时，它们就被完全从页面的其它元素流中移除；也就说与绝对定位元素根据包含它们的块定位，边缘使用侧偏移属性定位。绝对定位的元素不随其它元素浮动，其它元素也不围绕它浮动。因此，一个绝对定位的元素可能会覆盖其它元素。

固定位置：固定位置的元素和绝对定位模型类似，但是固定位置元素被完全从文档中移除，不与文档中的任何元素有相对位置。使用定位置定位，你可以仅使用CSS就可以创建类似HTML框架的接口。

定位元素需要指定偏移值。这些偏移通过使用顶部、左边、右边和底部样式属性来指定。每个值被解释为相应元素的外部边缘根据它原来的位置应该移动距离。 列表A中的例子包含了相对定位和绝对定位。页面使用绝对定位和百分比值被水平分为三部分。文本使用相对定位放置在每部分中。（如果你想查看代码，请点击列表A的链接）

CSS Positioning DIV#topDIV#middleDIV#bottom

.title

This is a test

4 种不同类型的定位。

static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。