当前位置: 首页 > 网络学院 > 网页制作基础教程 > CSS > CSS 定位

CSS
CSS 介绍
CSS 语法
使用 CSS
CSS 背景
CSS 文字
CSS 字体
CSS 边框
CSS 边距
CSS 填充
CSS 列表
CSS 尺寸
CSS 类别
CSS 定位
CSS 伪类
CSS 伪元素
CSS2 Media类型
CSS 摘要
CSS 实例
CSS2 参考资料
CSS2 打印

CSS 定位


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 770 ::
收藏到网摘: n/a

The CSS positioning properties allows you to position an element.
使用CSS定位属性可以让你定义元素的位置


实例

Position:relative
This example demonstrates how to position an element relative to its normal position.
如何让一元素相对于原始位置进行相对定位

Position:absolute
This example demonstrates how to position an element using an absolute value.
如何使用绝对值来定位元素

Set the shape of an element
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
何如设置元素的形状,并以这个形状显示

Overflow
This example demonstrates how to set the overflow property to specify what should happen when an element's content is too big to fit in a specified area.
当元素的内容超过了指定的范围,overflow属性就可以指定应该以怎样的形式来处理

Vertical align an image
This example demonstrates how to vertical align an image in a text.
如何垂直对齐一张图片

Z-index
Z-index can be used to place an element "behind" another element.
Z-index可以让一元素放到另一元素的"后面"

Z-index
The elements in the example above have now changed their Z-index.
上面例子中的元素现在Z-index值已经发生的变化


CSS Positioning Properties
CSS定位属性

The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.
CSS定位属性允许你指定元素上下左右的位置。也允许你设置元素的形状,将元素安置在另一个元素的后面,并指定当元素内容超出范围后应该怎么做。

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
支持的浏览器:IE,F,N

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

属性 描述 IE F N W3C
bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element
设置对象与其最近一个具有定位设置的父对象底边相关的位置
auto
%
length
5 1 6 2
clip Sets the shape of an element. The element is clipped into this shape, and displayed
设置对象的可视区域。
shape
auto
4 1 6 2
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element
设置对象与其最近一个具有定位设置的父对象左边相关的位置
auto
%
length
4 1 4 2
overflow
Sets what happens if the content of an element overflow its area
设置当对象的内容超过其指定高度及宽度时如何管理内容
visible
hidden
scroll
auto
4 1 6 2
position Places an element in a static, relative, absolute or fixed position
决定元素的定位方式
static
relative
absolute
fixed
4 1 4 2
right Sets how far the right edge of an element is to the left/right of the right edge of the parent element
设置对象与其最近一个具有定位设置的父对象右边相关的位置
auto
%
length
5 1 6 2
top Sets how far the top edge of an element is above/below the top edge of the parent element
置对象与其最近一个具有定位设置的父对象顶边相关的位置
auto
%
length
4 1 4 2
vertical-align Sets the vertical alignment of an element
设置元素垂直对齐方式
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index Sets the stack order of an element
设置对象的层叠顺序
auto
number
4 1 6 2

评论 (0) All

登陆 | 还没注册?