Layout ng CSS - Attribute ng position
- Previous page CSS max-width
- Next page CSS z-index
position Ang paglalarawan ay inilalarawan ang uri ng pamamaraan ng lokasyon ng elemento (static, relative, fixed, absolute o sticky).
position 屬性
position 屬性規定應用於元素的定位方法的類型。
有五個不同的位置值：
- static
- relative
- fixed
- absolute
- sticky
元素實際上是使用 top、bottom、left 和 right 屬性定位的。但是，除非首先設置了 position 屬性，否則這些屬性將不起作用。根據不同的 position 值，它們的工作方式也不同。
position: static;
HTML 元素默認情況下的定位方式為 static（靜態）。
靜態定位的元素不受 top、bottom、left 和 right 屬性影響。
position: static; 的元素不會以任何特殊方式定位；它始終根據頁面的正常流進行定位：
這是所用的 CSS：
Example
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; 的元素相對於其正常位置進行定位。
設置相對定位的元素的 top、right、bottom 和 left 屬性將導致其偏離其正常位置進行調整。不會對其餘內容進行調整來適應元素留下的任何空間。
這是所用的 CSS：
Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
position: fixed; 的元素是相對於視口定位的，這意味著即使滾動頁面，它也始終位于同一位置。 top、right、bottom 和 left 屬性用於定位此元素。
固定定位的元素不會在頁面中通常應放置的位置上留出空隙。
請注意頁面右下角的這個固定元素。這是所用的 CSS：
Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
position: absolute; 的元素相對於最近的定位祖先元素進行定位（而不是相對於視口定位，如 fixed）。
然而，如果絕對定位的元素沒有祖先，它將使用文檔主體（body），並隨著頁面滾動一起移動。
Note:“被定位的”元素是其位置除 static 以外的任何元素。
這是一個簡單的例子：
這是所用的 CSS：
Example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
position: sticky; elements based on the user's scroll position.
Sticky elements are positioned relative to the scroll position of the element.relative) and fixed (fixed) to switch between them. Initially, it will be relatively positioned until it encounters the given offset position in the viewport - then it will be 'pasted' at the appropriate position (such as position:fixed).
Note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example below). You must also specify at least top,right,bottom or left one, so that sticky positioning works.
In this example, the sticky element will stay at the top of the page when it reaches its scroll position (top: 0)
Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Overlapping elements
When positioning elements, they can overlap with other elements.
z-index The property specifies the stacking order of the element (which element should be placed in front of or behind other elements).
Elements can be set to positive or negative stacking order:
This is a title
Since the z-index of the image is -1, it is behind the text.
Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Elements with a higher stacking order are always in front of elements with a lower stacking order.
Note:If two positioned elements overlap and are not specified z-indexIf the last element in the HTML code is displayed at the top.
Position text in the image
How to place text on an image:
Example
Try it yourself:
More examples
- Set the shape of the element
- This example demonstrates how to set the shape of an element. The element is clipped to this shape and displayed.
All CSS positioning properties
| Property | Description |
|---|---|
| bottom | Set the bottom outer margin edge of the positioning box. |
| clip | I-cut ang element na may absolute positioning. |
| left | I-set ang malayuan na gilid sa kaliwa ng positioning box. |
| position | I-set ang uri ng pagkalokasyon ng element. |
| right | I-set ang malayuan na gilid sa kanan ng positioning box. |
| top | I-set ang malayuan na gilid sa itaas ng positioning box. |
| z-index | I-set ang pagkakasunod-sunod ng elements sa stack. |
Extended reading
Extra book:CSS overview of positioning
Extra book:CSS relative positioning
Extra book:CSS absolute positioning
- Previous page CSS max-width
- Next page CSS z-index
