CSS Position

最新推荐文章于 2024-05-09 09:28:41 发布

_一克拉的梦想_

最新推荐文章于 2024-05-09 09:28:41 发布

阅读量727

点赞数

分类专栏：复习笔记 CSS 文章标签： position

本文链接：https://blog.youkuaiyun.com/u013960094/article/details/24540167

版权

复习笔记同时被 2 个专栏收录

33 篇文章

订阅专栏

CSS

22 篇文章

订阅专栏

本文深入探讨CSS定位机制，包括绝对、相对、静态和固定定位，详细解释了top、bottom、left、right等属性的作用，并介绍了z-index、clip、overflow等关键概念。同时，文章还阐述了不同定位方式的特点与应用，帮助开发者更好地掌握网页布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 should be added to see the rest of the content

Tips: The default value for the body element is auto.

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