📅 最后修改于: 2020-11-06 01:04:07 🧑 作者: Mango
CSS position属性用于设置元素的位置。它还可用于将元素放置在另一个元素之后，并且对于脚本化动画效果很有用。
您可以使用top，bottom，left和right属性定位元素。只有先设置位置属性后，才能使用这些属性。位置元素的计算位置属性是相对的，绝对的，固定的或粘滞的。
让我们看一下以下CSS定位：
默认情况下，这是HTML元素的位置。它始终根据页面的正常流程定位元素。它不受top，bottom，left和right属性的影响。
fixed定位属性有助于将文本固定在浏览器上。此固定测试相对于浏览器窗口定位，即使滚动窗口也不会移动。
Some text...
Some text...
Some text...
........
.... ...
........
........
........
........
........
........
........
........
........
........
........
Some text...
Some text...
Some text...
This is the fix positioned text.
相对定位属性用于相对于其正常位置设置元素。
This is a heading with no position
This heading is positioned left according to its normal position
This heading is positioned right according to its normal position
The style "left:-30px" subtracts 30 pixels from the element's original left position.
The style "left:30px" adds 30 pixels to the element's original left position.
绝对定位用于相对于具有非静态位置的第一父元素定位元素。如果找不到这样的元素，则包含的块为HTML。
通过绝对定位，您可以将元素放置在页面上的任何位置。
This heading has an absolute position
The heading below is placed 150px from the left and 250px from the top of the page.
| No. | property | description | values |
|---|---|---|---|
| 1) | bottom | It is used to set the bottom margin edge for a positioned box. | auto, length, %, inherit |
| 2) | clip | It is used to clip an absolutely positioned element. | shape, auto, inherit |
| 3) | cursor | It is used to specify the type of cursors to be displayed. | url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help |
| 4) | left | It sets a left margin edge for a positioned box. | auto, length, %, inherit |
| 5) | overflow | This property is used to define what happens if content overflow an element’s box. | auto, hidden, scroll, visible, inherit |
| 6) | position | It is used to specify the type of positioning for an element. | absolute, fixed, relative, static, inherit |
| 7) | right | It is used to set a right margin edge for a positioned box. | auto, length, %, inherit |
| 8) | top | It is used to set a top margin edge for a positioned box. | auto, length, %, inherit |
| 9) | z-index | It is used to set stack order of an element. | number, auto, inherit |