css 中的 top 屬性用于設置元素相對于其父元素頂部的偏移距離，向上或向下移動元素。用法：1.指定長度值（如 “px”、”em” 或 “rem”）；2.auto：自動定位在頂部或底部；3.initial：重置為初始值；4.inherit：繼承父元素。
CSS 中 top 屬性的用法
什么是 top 屬性？
top 屬性用于設置元素相對于其父元素頂部的偏移距離。它可以將元素向上或向下移動。
用法：
top 屬性的語法如下：
<code>top: <length> | auto | initial | inherit;</length></code>
登錄后復制
其中：
<length></length>：指定一個長度值，如 “px”、”em” 或 “rem”。
auto：將元素定位在其父元素的頂部或底部，具體取決于元素的定位類型。
initial：將元素的 top 屬性重置為其初始值。
inherit：從父元素繼承 top 屬性值。
何時使用 top 屬性？
top 屬性通常用于以下情況：
創建重疊元素
將元素垂直對齊
創建垂直菜單或導航欄
控制元素在頁面上的位置
示例：
以下示例將 <div> 元素相對于其父元素頂部向下移動 50px：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;div {
top: 50px;
}</code></pre><div class="contentsignin">登錄后復制</div></div>
<p>以下示例將 <code><div> 元素相對于其父元素底部向上移動 20%：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="css">div {
top: -20%;
}</code></pre><div class="contentsignin">登錄后復制</div></div>
<p><strong>提示：</strong></p>
<ul>
<li>top 屬性還可以用于負值，這將元素向上移動。</li>
<li>top 屬性通常與其他定位屬性（如 left、right 和 bottom）結合使用，以精確控制元素的位置。</li>
<li>在<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/69306.html" target="_blank">絕對定位</a>元素時，top 屬性相對于其最近的定位父元素。</li>
</ul>
</div>
