您的位置：首页 > Web前端 > CSS

CSS Position

2014-04-26 17:11 330 查看

Positioning

CSS 位置性质允许你来放置一个元素。你可以把一个元素放在另一个元素后面，可以定义当一个元素的内容太多时应该如何处理。

Elements can be positioned using the top, bottom,
left, and right properties.

However, these properties will
not work unless the position property is set first (as
absolute, relative, or fixed).

元素可以使用这四个方向的性质来定位，但必须先指定 position 这个性质（即，如果元素的位置性质还是默认值，position: static），这四个方向性质不会有任何效果。

CSS top property

For absolutely positioned elements (those with position:
absolute or position :
fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

对于绝对放置的元素， top性质表示该元素的上外边距和包裹着它的元素的上边距之间的距离。

For relatively positioned elements (those with position:
relative), it specifies the amount the element is moved above/below its normal position.

对于相对放置的元素， top性质表示该元素相对于它的正常位置需要移动的量。

Static Positioning

默认情况下HTML元素是被静态放置的。static 元素总是根据正常的页面流从上到下，从左到右放置。

Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning

An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled

拥有固定位置的元素是相对于浏览器窗口定位。固定在萤幕视窗最大可视范围上，如果不指定位置
(top, left, right, bottom) 时，元素会固定在原本的位置；而指定位置后，就会以萤幕视窗最大可视范围的边界为绝对基准点。如果页面内容超过萤幕视窗最大可视范围，那么不论我们如何滚动页面，元素都会固定在萤幕视窗最大可视范围上我们所指定的位置。

特点：

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

固定位置的元素被从正常的页面流中剔除，文档和其他元素表现得就像这个固定位置的元素不存在一样。

Fixed positioned elements can overlap other elements.

它可以覆盖别的元素。

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

注意：IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.

Relative Positioning

元素被放在相对于它正常情况下应该在的位置 relative to its normal position.

h2.pos_left
{
position:relative;
left:-20px;
}

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

相对放置的元素可以被移动并覆盖住其他元素，但是它在正常页面流里本来占据的空间仍然有效（没有被删除）。

Tips： Relatively positioned elements are often used as container blocks for absolutely positioned elements.

相对放置的元素通常被用来作为绝对放置元素的块级容器。

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

绝对放置的元素是相对于离它最近的第一个（position属性 非static 的）父元素来放置。如果没有这样的元素存在，则以<html>为包围框。

h2
{
position:absolute;
left:100px;
top:150px;
}

特点同 fixed positioning, but remember they are still different

Overlapping Element

When elements are positioned outside the normal flow, they can overlap other elements.
当元素被从normal flow中删除，他们就可覆盖其他元素。

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

该性质指定了元素的叠放顺序。

An element can have a positive or negative stack order，

叠放顺序可正可负。值越大的，放得越靠上面。

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

Note: If two positioned elements overlap
without a z-index specified, the element positioned last in the HTML code will be
shown on top.

如果两个元素堆叠在一起，而没有指定它们的 z-index 值，则代码位于HTML文件后面的元素放置在上面。

Clip

The clip property lets you specify a rectangle to clip an absolutely positioned element.

该性质使你可以用矩形框剪切一个被绝对放置的元素，如：图片。被矩形框框住的区域被保留（visible）。

The rectangle is specified as four coordinates, all from the top-left corner
of the element to be clipped.

从元素的左上角开始剪切。

Note: The clip property does not work if "overflow:visible".

注意，如果溢出设置为可见，该性质就不起作用了。

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

取值：

auto 默认值， No clipping will be applied.
shape 唯一的有效取值是矩形。rect (top, right, bottom, left)

Overflow

The overflow property specifies what happens if content overflows an element's box.

该性质定义了如果内容超出了一个元素的盒模型将会发生什么。

取值：

visible 默认值， It renders outside the element's box. 会无视元素的边界限定，把内容全部显示出来。
hidden 超出部分被剪切掉，the rest of the content will be
invisible
scroll 超出部分被剪切掉，但是会添加一个滚动条用于查看 the rest of the content
auto If overflow is clipped, a scroll-bar sho
4000
uld be added to see the rest of the content
Tips: The default value for the body element is auto.

<body> 元素溢出属性默认值是 auto。

Cursur

The cursor property specifies the type of cursor to be displayed when pointing on an element.

该性质定义了当鼠标指向一个元素时，光标显示的类型。

默认值为auto，效果同 text，可以选择文本的样式。常用的有
help，pointer

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： position

相关文章推荐

新的分享

章节导航