当前位置: 首页 > 网络学院 > 网页制作基础教程 > CSS > CSS 定位
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值已经发生的变化
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 |