CSS - top 属性



top CSS 属性用于指定元素相对于其容器元素的垂直位置,前提是position属性设置为absolutefixedrelativesticky

注意:只有当position属性设置为static以外的值(默认值为static)时,top属性才有效。

根据position属性的值,确定top属性的效果。

Position 值 Bottom 属性
absolute 或 fixed 指定元素上边缘的外边距与其容器上边缘内边框之间的距离。
relative 指定元素上边缘相对于其正常位置移动的距离。
sticky 用于计算粘性约束矩形。
static 对元素的位置没有影响。

同时指定topbottom值时,如果position设置为absolutefixed,并且高度为100%或auto,则两个值都会生效。

如果高度受限或position设置为relative,则top值优先,bottom值将被忽略。

可能的值

  • <length> − 可以指定负值、零值或正值。

  • <percentage> − 容器高度的百分比。

  • auto − 默认值。浏览器计算底部位置。

应用于

所有HTML定位元素。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

DOM 语法

object.style.top = "20px";

CSS top - 绝对定位

以下是一个示例,其中我们设置position:absolute和不同的top属性值(auto, percent, length) −

Open Compiler
<html> <head> <style> div { position: absolute; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:absolute top:auto</div> <div class="percent">Position:absolute top:30%</div> <div class="length">Position:absolute top:3inches</div> </body> </html>

CSS top - 相对定位

以下是一个示例,其中position:relative和不同的top属性值(auto, percent, length) −

Open Compiler
<html> <head> <style> div { position: relative; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:relative top:auto</div> <div class="percent">Position:relative top:30%</div> <div class="length">Position:relative top:3inches</div> </body> </html>

CSS top - 固定定位

以下是一个示例,其中我们设置position:fixed和不同的top属性值(auto, percent, length) −

Open Compiler
<html> <head> <style> div { position: fixed; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:fixed top:auto</div> <div class="percent">Position:fixed top:30%</div> <div class="length">Position:fixed top:3inches</div> </body> </html>

CSS top - 粘性定位

以下是一个示例,其中position:sticky和不同的top属性值(auto, percent, length) −

Open Compiler
<html> <head> <style> div { position: sticky; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:sticky top:auto</div> <div class="percent">Position:sticky top:30%</div> <div class="length">Position:sticky top:3inches</div> </body> </html>

CSS top - 静态定位

以下是一个示例,其中position:static和不同的top属性值(auto, percent, length) −

Open Compiler
<html> <head> <style> div { position: static; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { bottom:auto; background-color: yellow; } div.percent { bottom:30%; background-color: pink; } div.length { bottom:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:static top:auto</div> <div class="percent">Position:static top:30%</div> <div class="length">Position:static top:3inches</div> </body> </html>
广告