CSS에서 top을 사용하는 방법

CSS의 top 속성은 상위 요소의 상단을 기준으로 요소의 오프셋 거리를 설정하여 요소를 위나 아래로 이동하는 데 사용됩니다. 사용법: 1. 길이 값(예: "px", "em" 또는 "rem")을 지정합니다. 2.auto: 자동으로 상단 또는 하단에 배치됩니다. 3.initial: 초기 값으로 재설정합니다. 상위 요소를 상속받습니다.

CSS에서 최상위 속성 사용

최상위 속성이란 무엇인가요?

top 속성은 상위 요소의 상단을 기준으로 요소의 오프셋 거리를 설정하는 데 사용됩니다. 요소를 위나 아래로 이동합니다.

사용법:

top 속성의 구문은 다음과 같습니다.

<code>top: <length> | auto | initial | inherit;</code>

위치:

• <length>: "px", " em" 또는 "rem" ". <length>：指定一个长度值，如 "px"、"em" 或 "rem"。
• auto：将元素定位在其父元素的顶部或底部，具体取决于元素的定位类型。
• initial：将元素的 top 属性重置为其初始值。
• inherit：从父元素继承 top 属性值。

何时使用 top 属性？

top 属性通常用于以下情况：

• 创建重叠元素
• 将元素垂直对齐
• 创建垂直菜单或导航栏
• 控制元素在页面上的位置

示例：

以下示例将 <div> 元素相对于其父元素顶部向下移动 50px：

<code class="css">div {
  top: 50px;
}</code>

以下示例将 <div>

auto: 요소의 위치 지정 유형에 따라 요소를 상위 요소의 상단 또는 하단에 배치합니다.

initial: 요소의 최상위 속성을 초기 값으로 재설정합니다.

inherit: 상위 요소에서 최상위 속성 값을 상속합니다.

• 최상위 속성은 언제 사용하나요?
• top 속성은 일반적으로 다음 용도로 사용됩니다.

🎜🎜겹치는 요소 만들기 🎜🎜요소 수직 정렬 🎜🎜세로 메뉴 또는 탐색 모음 만들기 🎜🎜페이지에서 요소 위치 제어 🎜🎜🎜🎜예: 🎜🎜 🎜아래 예에서는 <div> 요소를 상위 요소의 상단을 기준으로 50px 아래로 이동합니다. 🎜

<code class="css">div {
  top: -20%;
}</code>

🎜다음 예에서는 <div> 요소를 기준으로 위로 이동합니다. 상위 요소의 맨 아래로 20% 이동: 🎜rrreee🎜🎜팁: 🎜🎜🎜🎜top 속성은 요소를 위쪽으로 이동하는 음수 값과 함께 사용할 수도 있습니다. 🎜🎜top 속성은 요소의 위치를 ​​정밀하게 제어하기 위해 왼쪽, 오른쪽, 아래쪽과 같은 다른 위치 지정 속성과 함께 사용되는 경우가 많습니다. 🎜🎜요소가 절대 위치에 있을 때 top 속성은 가장 가까운 위치에 있는 상위 요소를 기준으로 합니다. 🎜🎜