这篇文章需要文法复核。如何帮忙。

这篇翻译不完整。请帮忙从英语翻译这篇文章

简介

CSS的 position 属性设置元素的定位方式,为将要定位的元素定义定位规则。该属性对脚本编写动画特效十分有用。

初始值static
适用元素all elements
是否是继承属性
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

定位元素(positioned element)计算后位置属性为 relativeabsolute 、 fixed 或 sticky 的元素。

相对定位元素(relatively positioned element计算后位置属性为 relative 的元素。

绝对定位元素(absolutely positioned element)计算后位置属性为 absolute  fixed 的元素。

粘性定位元素stickily positioned element计算后位置属性为 sticky 的元素。

toprightbottomleft 属性指定定位元素的位置。

语法

/* 关键字值 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* 全局值 */
position: inherit;
position:initial;
position: unset;

取值

static
这个关键字使得这个元素使用正常的表现,即元素处在文档流中它当前的布局位置,toprightbottomleft 和 z-index 属性无效。
relative
使用这个关键字来布局元素就好像这个元素没有被设置过定位一样。即会适应该元素的位置,并不改变布局(这样会在此元素原本所在的位置留下空白)。position:relative对table-*-group, table-row, table-column, table-cell, table-caption无效。
absolute
不为元素预留空间,元素位置通过指定其与它最近的非static定位的祖先元素的偏移来确定。绝对定位的元素可以设置外边距(margins),并且不会与其他边距合并。
fixed
不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间,并且该元素的位置在屏幕滚动时不会发生改变。打印时元素会出现在的每页的固定位置。fixed属性通常会创建新的栈环境。
sticky 
The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes.

     容器的位置根据正常文档流计算得出。

当容器B设置为position: sticky时,那么其接下来的容器就会自动计算就好像容器B没有偏移。
When a box B is stickily positioned, the position of the following box is calculated as though B were not offset.
position: sticky在table元素上的效果和position: relative相同。
The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.

格式化语法

position: static | relative | absolute | sticky | fixed | inherit

示例

相对定位

HTML代码

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

如下CSS代码,可以将元素定位到距离它本来位置的顶部和左侧分别 20px 的位置。

CSS代码

.box { 
   display: inline-block; 
   background: red; 
   width: 100px; 
   height: 100px; 
   float: left; 
   margin: 20px; 
   color: white; 
}

#two { 
   position: relative; 
   top: 20px; 
   left: 20px; 
}
 

注意“Two”元素之外的元素是如何显示的,“Two”元素的本来位置在文档流里仍是占用空间的。

绝对定位

相对定位(position: relative)的元素仍然被认为是处于文档流之中。相比之下,绝对定位(position: absolute)的元素则被认为脱离了文档流。绝对定位元素的位置是相对于他最近的定位祖先元素(position值非static)。如果没有这样一个祖先元素,则相对于原始的容器。

下面的例子中,id为one的盒子是相对定位的,所以它是离id为two的盒子最近的祖先元素,#two相对于#one绝对定位。

#one { position: relative; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }
 
 

如果#one不是相对定位,他就不是#two最近的定位祖先元素,则#two是相对于外面的盒子定位的。

固定位置定位

除了固定定位的元素的是被屏幕视窗包裹,固定位置定位和绝对定位相似。这常用于创建一个浮动的元素一致保持在相同的位置甚至当页面滚动的时候。下面的例子,“One”#div页面距页面顶部80px,距页面左边20px浮动:

#one { position: fixed; top: 80px; left: 20px; }
 

当浏览页面的顶部,这个固定位置定位的元素出现在左上方。页面滚动后,相对于屏幕,它依然在相同的位置。

fixed-1.png

fixed-2.png

Sticky positioning

Sticky positioning is a hybrid of relative and fixed positioning.  The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.  For instance:

#one { position: sticky; top: 10px; }
 
will behave just like a relatively positioned element until the viewport scrolls such that the element would be less than 10px from the top.  Then, it will be fixed to 10px from the top until the viewport is scrolled back past this threshold.
 
Sticky positioning is commonly used for the headings in an alphabetized listing.  The B heading will appear just below the items that begin with A until they are scrolled offscreen.  Rather than sliding offscreen with the rest of the content, the B heading will then remain fixed to the top of the viewport until all the B items have scrolled offscreen, at which point it will be covered up by the C heading.
 
 
You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected.  Otherwise, it will be indistinguishable from relative positioning.
 

注释

For relatively positioned elements, the top or bottom property specifies the vertical offset from the normal position and the left or right property specifies the horizontal offset.

For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element's containing block (what the element is positioned relative to). The margin of the element is then positioned inside these offsets.

Most of the time, absolutely positioned elements have autovalues of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.

Except for the case just described of absolutely positioned elements filling the available space:

  • If both top and bottom are specified (technically, not auto), top wins.
  • If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.).

对于相对定位元素,topbottom 属性指定它相对正常位置的垂直偏移,leftright 属性指定水平偏移。

对于绝对定位元素,toprightbottomleft 属性指定元素与其包含块的偏移,即此时位置为与包含块的相对位置。元素的边距(margin)定位在这些偏移之中。

在大多数时候,绝对定位元素的 heightwidth 属性的值为 auto,它们会自动计算以适合元素的内容。但是非替换(non-replaced)绝对定位元素可以占据 topbottom 的值(除 auto 外)所共同指定的可用空间,而不必设置 height(也就是设其为 auto)。leftrightwidth 也类似。

绝对定位元素的定位值发生冲突时的解决方法:

  • 如果同时指定 topbottom(非 auto),优先采用 top
  • 如果同时指定 leftright,若 direction 为 ltr(英语、汉语等),则优先采用 left;若 direction 为 rtl(阿拉伯语、希伯来语等),则优先采用 right

规范

Specification Status Comment
CSS Level 2 (Revision 1)
position
Recommendation  
CSS Positioned Layout Module Level 3
position
Working Draft Addsstickyproperty value

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) [1] 4.0 [3] 4.0 1.0 (85)
fixedvalue 1.0 1.0 (1.0) 7.0 4.0 1.0 (85)
stickyvalue ? 32 (32.0)bug 916315 [2] ? ? 6.1 -webkit-
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1.0) [1] ? ? iOS 6.1 -webkit-

[1] Since Firefox 30, Gecko allows <tr>, <thead>, and  <tfoot> elements with a position: relative; style to act as absolute positioning containers. This means that a position: 

absolute;styled element inside the table can be positioned relative to these elements. In other browsers and in older versions of Firefox, setting position: relative; on a table row or row group has no effect. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing a warning to the JavaScript console if you use this feature:

Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

[2 ] Sticky positioning will only work in Firefox 26 to Firefox 31, included, when the about:config preferencelayout.css.sticky.enabled is set to true. From Firefox 27 to 31, it was the default value for Nightly and Aurora versions of the browser.

[3] In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.

参见

文档标签和贡献者

标签: 
 最后编辑者: kkxujq,