CSS 위치 지정 속성

다음 주제를 살펴보세요.

1. 장소 규제
2. 해당 포지셔닝
3. 정확한 포지셔닝
4. 변하지 않는 위치
5. 부착 포지셔닝
6. 위치 및 속성 제어
7. 플로팅 설정
8. 설명 설정

위치 속성은 페이지에서 요소의 위치를 결정합니다. 요소의 위치를 설정한 후에는 상단, 하단, 왼쪽 및 오른쪽 속성을 조정할 수 있습니다.

장소 규제

모든 요소는 기본적으로 고정된 배치를 가지므로 요소는 document 흐름을 유지합니다. 고정 위치가 있는 요소는 쌓인 순서대로 표시됩니다. 스타일을 추가하지 않으면 서로 겹치지 않으며 다양한 요소가 서로 다른 기본 원칙을 갖지 않습니다. 요소를 고정으로 정의하는 유일한 동기는 적용된 위치 지정을 제거하는 것입니다.

해당 포지셔닝

상응하도록 구성된 요소는 일반적인 위치를 기준으로 배치됩니다. 추가 배치 속성(상단, 왼쪽, 하단 또는 오른쪽)이 포함되지 않은 해당 설정은 변경되지 않습니다. 마치 고정된 것처럼 유지한 것처럼 정확하게 자기 자신과 관련되어 있기 때문입니다. 해당 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 정의하면 해당 요소가 일반적인 위치에서 이동합니다. 다른 콘텐츠는 요소가 남긴 간격에 맞게 조정되지 않습니다.

해당 위치 지정이 있는 요소는 배치에 영향을 주거나 표준 document 흐름을 방해하지 않고 다른 요소와 겹칠 수 있습니다.

요소에 해당 위치를 사용하면 몇 가지 다른 일이 발생합니다.

1. 해당 요소에서 z축 활용을 시작합니다. 고정 요소에서는 작동하지 않습니다. z축 값을 설정하지 않더라도 이 요소는 개입하는 다른 고정 요소 위에 나타납니다. Z축은 고정으로 지정되지 않은 모든 요소에 액세스할 수 있습니다. 
2. 완전히 배치된 하위 요소를 제한합니다. 해당 요소의 하위 역할을 하는 모든 요소 또는 고정과 다른 배치는 해당 요소 내에 정확하게 배치될 수 있습니다. 

Z축 값 적용에 대한 이해를 넓혀보세요.

정확한 포지셔닝

표준 document 흐름에서 요소를 대체하려면 정확한 배치가 훌륭한 선택입니다. 정확한 요소의 위치는 다른 요소의 영향을 받지 않으며 다른 요소의 배치에 영향을 주지 않습니다. 

기본적으로 요소의 배치는 본문 요소를 기준으로 하지만 해당 상위 요소가 고정 요소가 아닌 것으로 지정된 경우 요소 내부에 정확한 요소를 배치할 수 있습니다.

배치 속성인 위쪽, 왼쪽, 아래쪽 및 오른쪽을 활용하여 위치를 설정합니다. 이러한 값은 고정된 구성과 다른 구성을 가진 가장 가까운 상위 요소를 기준으로 합니다.

변하지 않는 위치

변경되지 않는 요소는 뷰포트 또는 브라우저 창을 기준으로 배치됩니다.

페이지 스크롤 중에 변경되지 않는 요소는 해당 위치에 고정된 상태로 유지됩니다. 이 위치 선택은 안정적인 탐색을 위해 자주 활용됩니다.

부착 포지셔닝

연결된 요소는 뷰어의 스크롤 위치에 따라 해당 위치와 변경되지 않는 위치 사이를 교환합니다.

연결된 요소는 정의된 스크롤 수준에 도달할 때까지 document 흐름과 관련됩니다. 그 순간, 직계 상위 요소 내에서 변경되지 않는 요소의 동작으로 전환됩니다. 연결된 요소가 상위 요소의 베이스에 도달하면 스크롤이 중단됩니다.

기능을 수행하려면 첨부된 위치 지정을 위해 상단, 하단, 왼쪽 또는 오른쪽에 대해 하나 이상의 배치 값을 지정해야 합니다. 상위 요소에 높이가 설정되어 있거나 숨김, 스크롤 또는 자동으로 지정된 오버플로가 있는 경우 연결된 위치가 정확하게 작동하지 않을 수 있습니다.

연결된 위치 지정을 보증하지 않는 일부 브라우저가 있습니다. 어떤 브라우저가 첨부된 위치를 승인하는지 확인하세요..

배치 제어 및 값

해당하는 정확하고 변경되지 않는 첨부된 배치 속성의 경우 스타일 패널에 다음과 같은 컨트롤이 있습니다.

• 배치 제어
• 상관성 지표
• Z축 값 필드

배치 제어

위치가 정확하고 변하지 않는 요소의 경우 상관성 표시기에 표시된 요소를 기준으로 요소를 배치할 수 있는 사전 설정이 제공됩니다.

후속 사전 설정 위치 중 하나를 선택할 수 있습니다.

• 왼쪽 위: 다음과 같이 값을 지정합니다. 위쪽: 0px 및 왼쪽: 0px
• 오른쪽 상단: 다음과 같은 값을 나타냅니다. 상단: 0px, 오른쪽: 0px
• 왼쪽 하단: 값을 하단: 0px 및 왼쪽: 0px로 설정합니다.
• 오른쪽 하단: 값을 하단: 0px, 오른쪽: 0px로 구성합니다.
• 왼쪽: 위쪽: 0px, 왼쪽: 0px, 아래쪽: 0px와 같은 값을 할당합니다.
• 오른쪽: 위쪽: 0px, 오른쪽: 0px, 아래쪽: 0px 같은 값을 할당합니다.
• 위쪽: 위쪽: 0px, 왼쪽: 0px, 오른쪽: 0px 등의 값을 설정합니다.
• 하단: 값을 하단: 0px, 왼쪽: 0px, 오른쪽: 0px로 정의합니다.
• 전체: 위쪽: 0px, 아래쪽: 0px, 왼쪽: 0px, 오른쪽: 0px와 같은 값을 지정합니다(전체 상대 상위 또는 본문 포함).

수동 제어를 사용하면 사전 설정을 변경하거나 상단, 하단, 왼쪽 및 오른쪽과 같은 각 측면에 대한 자동 값으로 전환할 수 있습니다. 컨트롤을 조작하거나 탭하여 사전 설정 값을 선택하거나 사용자 정의 값을 입력하여 각 측면의 값을 조정할 수 있습니다.

• 상단: 값을 늘리면 요소가 상단에서 아래쪽으로 푸시됩니다.
• 왼쪽: 증가시키면 요소가 왼쪽에서 오른쪽으로 이동합니다.
• 오른쪽: 값을 늘리면 요소가 오른쪽에서 왼쪽으로 이동합니다.
• 하단: 이를 늘리면 요소가 하단에서 위쪽으로 이동합니다.

이들 중 하나에 대해 음수 값을 활용하면 반대 방향으로 이동하고 잠재적으로 상위 요소의 경계를 넘어 이동할 수 있습니다.

포지셔닝 표시기

위치 표시기는 선택한 항목이 어떤 요소와 관련하여 배치되어 있는지 보여줍니다.

다음으로 설정된 요소를 기억하세요. 상대적인 위치 지정은 자신을 기준으로 위치 지정됩니다.

절대값으로 설정된 요소는 상위 요소를 기준으로 배치됩니다. 기본적으로 이는 body 요소일 수 있습니다. 특정 상위 요소 내에서 요소를 절대적으로 배치하려면 해당 선행 요소의 위치를 정적이 아닌 다른 위치로 수정하세요.

ㅏ 결정된 요소는 페이지 본문을 기준으로 위치가 지정되며 페이지를 스크롤할 때에도 고정된 상태로 유지됩니다.

고정 요소는 직계 상위 요소를 기준으로 위치가 지정됩니다. 때로는 이것이 페이지 본문이 될 수도 있습니다.

레이어 인덱스

레이어 인덱스는 컴퓨터 화면 안팎으로 확장되는 이론적 Z축의 요소 위치를 나타냅니다. 처음에 요소는 자동 레이어 인덱스를 가지며, 페이지 하단에 있는 요소는 그 위의 요소 위에 쌓이고, 오른쪽에 있는 요소는 왼쪽에 있는 요소 위에 쌓입니다. 정적 요소는 상대, 절대, 고정 또는 고정 세트 위치를 사용하여 배치된 요소 아래에 일관되게 쌓입니다.

배치된 요소는 자연스러운 document 흐름에서 다른 요소와 겹칠 수 있으므로 배치된 요소의 레이어 인덱스 값을 조정하여 기본 스택 순서를 수정할 수 있습니다. 높은 값이 낮은 값 위에 쌓입니다. 레이어 인덱스 값의 범위는 0에서 2147483647까지입니다. 음수 값도 허용되지만 이를 사용하면 요소가 대부분의 다른 요소 아래에 렌더링될 수 있으므로 요소 가시성이 손상될 수 있습니다.

중첩 요소의 레이어 인덱스

레이어 인덱스가 자동으로 설정되면 요소의 정렬 순서가 상위 요소의 정렬 순서에 맞춰 정렬됩니다. 이러한 요소는 상위 요소를 기준으로 쌓일 수 있지만 다른 요소와 관련하여 상위 요소의 z축 내에 유지됩니다. 예를 들어 요소 A가 요소 B보다 높은 레이어 인덱스를 보유하는 경우 요소 B의 하위 요소는 요소 B의 레이어 인덱스 값이 얼마나 높은지에 관계없이 요소 A를 초과할 수 없습니다.

부동 구성

텍스트가 요소 주위를 둘러싸도록 하려면 요소를 왼쪽이나 오른쪽으로 띄우십시오. 이를 달성하려면 스타일 패널에서 왼쪽 부동 또는 오른쪽 부동 속성을 활성화합니다.

페이지 흐름에서 기본 위치를 유지하는 요소를 왼쪽이나 오른쪽으로 띄울 수도 있고, 아무것도 띄우지 않을 수도 있습니다.

부동 여러 요소는 나란히 정렬됩니다. 이 레이아웃 방법은 컬렉션 목록 및 탐색 링크와 같은 다양한 기본 Webflow 요소에서 활용됩니다. 또는 다음 레이아웃 작업을 수행할 수 있습니다. 플렉스박스 포함.

부동 없음

없음은 대부분의 요소에 대한 표준 설정 역할을 하며 일반 document 흐름에서 요소를 배치합니다. 요소가 더 큰 중단점에서와 같이 부동 설정을 상속하는 경우 부동을 없음으로 설정하여 페이지에서의 자연스러운 위치를 복원할 수 있습니다.

왼쪽으로 뜨다

요소를 왼쪽으로 부동시키면 상위 요소 내에서 왼쪽으로 정렬됩니다. 또한 명확한 설정이 적용되지 않는 한 모든 요소를 요소 바로 옆의 오른쪽이나 아래에 정렬합니다.

플로트 오른쪽

요소를 오른쪽으로 부동시키면 상위 요소 내의 오른쪽에 정렬됩니다. 플로팅 요소 바로 아래에 있는 긴 단락이나 서식 있는 텍스트는 명확한 속성이 설정되지 않은 한 해당 요소를 둘러쌉니다.

구성 지우기

요소에 대해 클리어를 활성화하면 플로팅 요소 주위를 둘러싸지 않게 됩니다. 이 설정은 플로팅 요소 아래에 쌓인 모든 요소에 구현할 수 있지만 플로팅 요소 자체에는 적용할 수 없습니다.

명확한 속성이 설정된 요소는 부동 소수점이 원하는 대로 부동 소수점 옆으로 위로 이동하지 않고 대신 부동 소수점을 지나 아래쪽으로 재배치됩니다.

지우기 없음

지우기 없음은 대부분의 요소에 대한 기본 설정을 나타냅니다. 없음으로 설정한 요소는 document 흐름에서 바로 위에 있는 부동 요소 옆에 수용되거나 둘러싸게 됩니다.

요소가 더 큰 중단점에서와 같이 지우기 설정을 상속하는 경우 지우기를 없음으로 설정하여 일반적인 지우기 설정을 지울 수 있습니다.

왼쪽 지우기

Clear Left는 요소가 왼쪽 부동 요소 주위를 감싸는 것을 방지합니다.

오른쪽 지우기

Clear Right는 요소가 오른쪽 부동 요소 주위를 둘러싸는 것을 금지합니다.

둘 다 지우기

모두 지우기(Clear Both)는 요소가 왼쪽 또는 오른쪽으로 부동하는지 여부에 관계없이 부동 요소 주위를 둘러싸는 것을 방지합니다.