top
Baseline 廣泛可用 *
試一試
top: 0;
top: 4em;
top: 10%;
top: 20px;
<section id="default-example">
<div class="example-container">
<div id="example-element">I am absolutely positioned.</div>
<p>
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn
Hill.
</p>
</div>
</section>
.example-container {
border: 0.75em solid;
padding: 0.75em;
text-align: left;
position: relative;
width: 100%;
min-height: 200px;
}
#example-element {
background-color: #264653;
border: 4px solid #ffb500;
color: white;
position: absolute;
width: 140px;
height: 60px;
}
top 的效果取決於元素的定位方式（即 position 屬性的值）
- 當
position設定為absolute或fixed時，top屬性指定元素頂部外邊距邊緣與其包含塊頂部內邊框邊緣之間的距離，或者，在錨點定位元素中使用anchor()函式時，相對於指定的<anchor-side>邊緣。top屬性與top、bottom、start、end、self-start、self-end、center和<percentage>值相容。 - 當
position設定為relative時，top屬性指定元素的頂部邊緣在其正常位置下方移動的距離。 - 當
position設定為sticky時，top屬性用於計算粘性約束矩形。 - 當
position設定為static時，top屬性無效。
當同時指定 top 和 bottom 值時，有三種不同情況
- 如果
position設定為absolute或fixed且height未指定（auto或100%），則top和bottom值都會被尊重。 - 如果
position設定為relative或height受到限制，則top屬性優先，bottom屬性被忽略。 - 如果
position設定為sticky，則top和bottom值都會被考慮。這意味著粘性元素可以在其包含塊內上下移動，只要元素的定位框保持在其包含塊內。
語法
css
/* <length> values */
top: 3px;
top: 2.4em;
top: anchor(bottom);
top: anchor-size(--my-anchor self-block, 10%);
/* <percentage>s of the height of the containing block */
top: 10%;
/* Keyword value */
top: auto;
/* Global values */
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;
值
<length>-
負值、零值或正值
<length>- 對於絕對定位元素，它表示到包含塊頂部邊緣的距離。
- 對於錨點定位元素，
anchor()函式解析為一個<length>值，相對於關聯的錨點元素的頂部或底部邊緣的位置（參見將內嵌屬性與anchor()函式值一起使用），而anchor-size()函式解析為一個<length>值，相對於關聯的錨點元素的寬度或高度（參見根據錨點大小設定元素位置）。 - 對於相對定位元素，它表示元素在其正常位置下方移動的距離。
<percentage>-
包含塊高度的
<percentage>。 auto-
指定
正式定義
正式語法
top =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
一個距頂部 10% 的定位元素
css
body {
background: beige;
}
div {
position: absolute;
top: 10%;
right: 40%;
bottom: 20%;
left: 15%;
background: gold;
border: 1px solid blue;
}
html
<div>The size of this content is determined by the position of its edges.</div>
規範
| 規範 |
|---|
| CSS 定位佈局模組第 3 級 # 內嵌 |
瀏覽器相容性
載入中…