영역 또는 요소의 위치 유형을 결정할 수 있습니다. 이를 위해 위치 속성이 사용됩니다. 이 속성은 요소가 최종적으로 배치되는 방식을 지정합니다. 총 네 가지 위치 변형 중에서 선택할 수 있습니다.
- 정적 - 특별한 위치 지정이 사용되지 않으며 일반적인 텍스트 흐름이 발생합니다.
- 상대적 - 요소의 정상 위치 또는 시작 위치를 기준으로 상대적 위치가 지정됩니다.
- 절대 - 절대 위치 지정은 상단, 하단, 왼쪽 및 오른쪽 속성을 통해 이루어집니다. 절대 위치 요소는 일반 텍스트 흐름 외부에 있습니다. 절대 위치는 부모 요소의 가장자리를 기준으로 계산됩니다(단, 위치: 정적 속성이 없는 경우에만 해당).
- 고정 - 요소가 절대적으로 배치됩니다. 스크롤할 때 요소가 제자리에 유지됩니다.
처음 두 가지 변형은 가변 위치 지정을 가능하게 합니다. 여기서 요소는 서로를 기준으로 배치됩니다. 다음 두 예는 이러한 유형의 위치 지정이 어떻게 보이는지 보여줍니다:
- 요소 2는 요소 1에 대해 30픽셀 오프셋으로 배치됩니다.
- 요소 2는 요소 1 뒤에 배치됩니다.
고정형과 정적형에서는 상황이 다릅니다. 이를 통해 요소를 매우 특정한 위치에 배치할 수 있습니다. 위치 정보는 상위 요소 또는 브라우저 창을 참조합니다. 다음은 예시입니다:
- 요소 1은 브라우저 창의 오른쪽 가장자리에서 정확히 30픽셀, 상단 가장자리에서 20픽셀 떨어진 곳에 배치됩니다.
다양한 위치 변형은 아래에 자세히 설명되어 있습니다. 하지만 먼저 참고할 사항: 플로팅은 요소의 위치와 관련하여 중요한 역할을 합니다. 다음 튜토리얼에서 이 중요한 CSS 원칙에 대해 더 자세히 설명하겠습니다. 기본적으로 플로팅은 웹사이트의 요소가 문서에서 어떻게 흐르는지에 관한 것입니다. 요소는 각 방향으로 가능한 한 멀리 밀려납니다. 요소 흐름은 포지셔닝 유형에 따라 명시적으로 결정될 수 있습니다.
상대적 위치 지정
위치: 상대적을 통해 상대적 포지셔닝을 사용하면 두 가지 일이 발생합니다:
- 상자가 정상적인 흐름에서 벗어나 이동합니다.
- 요소의 원래 위치가 예약됩니다.
원래 위치를 예약하면 다른 요소는 해당 요소가 실제로 해당 위치에 있는 것처럼 동작합니다.
예시:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <스타일> div { 너비: 20%; 배경색: 흰색; 패딩: 10px; 테두리: 1px 단색 검정; 여백: 5px; } #box { 위치: 상대; 위쪽: 25px; 오른쪽: 25px; 배경색:#33CCFF; } </style> </head> <body> <div id="box">Box 1</div> <div>Box 2</div> <div>Box 3</div> </body> </html>여기에는 세 개의 상자가 정의되었습니다.
상자 2와 상자 3에는 어떤 위치 지정 지침도 주어지지 않았습니다. 따라서 일반적인 문서 흐름을 따릅니다. 반면에 박스 1은 상대적으로 위치가 지정되었습니다. 즉, 상자 2와 3은 상자 1의 영향을 전혀 받지 않으므로 상자 1의 공간이 이 상자에 의해 차지되지 않습니다. 상자는 상단, 하단, 왼쪽 및 오른쪽 사양을 사용하여 배치됩니다. 상대적 위치는 문서 흐름의 원래 위치를 기준으로 합니다.
- 위쪽 : 25px - 상자가 25픽셀 아래쪽으로 이동합니다. 상자의 정상 위치에서는 상단에 25픽셀이 삽입됩니다.
- 오른쪽: 25px - 상자가 왼쪽으로 25픽셀 이동합니다. 상자의 정상 위치에서 25픽셀이 오른쪽에 삽입됩니다.
픽셀 사양은 원래 위치를 기준으로 합니다. 사양에 따라 값이 삽입되는 위치, 즉 위쪽과 오른쪽이 결정됩니다. 이 측면이 결정적입니다. 사양은 상자가 이동되는 위치를 결정하지 않습니다.
절대 위치 지정
절대 위치 지정을 계속합니다. 이 유형의 위치 지정은 요소를 흐름에서 완전히 제거합니다. 페이지의 다른 요소는 해당 요소가 전혀 없는 것처럼 동작합니다.
예시입니다:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <스타일> div { 너비: 20%; 배경색: 흰색; 패딩: 10px; 테두리: 1px 단색 검정; 여백: 5px; } #box { 위치: 절대; 위쪽: 25px; 오른쪽: 25px; background-color:#33CCFF; } </style> </head> <body> <div id="box">Box 1</div> <div>Box 2</div> <div>Box 3</div> </body> </html>여기에도 세 개의 상자가 정의되었습니다. 박스 1은 절대적으로 배치되었습니다.
상대적 위치 지정과 달리 상자 1에는 공백이 없습니다. 상자 2와 3은 상단으로 슬라이드됩니다.위, 오른쪽, 아래 또는 왼쪽 위치 지정은 더 이상 흐름에서 상자의 원래 위치를 기준으로 하지 않습니다. 대신 상대, 절대 또는 고정으로 배치된 다음 주변 요소를 참조합니다. 주변 요소가 없는 경우 위치는 문서 트리의 최상위 요소, 즉 HTML을 기준으로 지정됩니다.
고정으로 위치 지정
요소는 위치: 고정으로 고정할 수 있습니다. 다음은 다른 예입니다:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <스타일> p { 여백-왼쪽: 25%; } #fixed { 위치: 고정; 위: 20px; 왼쪽: 20px; 배경색:#33FFCC; 너비: 20%; 패딩: 10px; 테두리: 1px 단색 검정; } </style> </head> <body> <div id="fixed">스플릿터 효과 파트 1</div> <p>한시적으로 온라인 보기의 최신 튜토리얼 또는 비디오 교육 또는 다운로드 카테고리의 콘텐츠는 포인트가 무료입니다. 여기에서 자세히 알아보세요...</p> </body> </html>고정 상자는 스크롤되지 않고 항상 할당된 위치에 유지됩니다.
고정 상자의 경우 주변 요소는 항상 브라우저 창입니다.
구형 브라우저에서는 고정 요소에 상당한 문제가 있다는 점에 유의하세요. 예를 들어 IE6에서는 제대로 작동하지 않습니다. 이 브라우저에 맞게 웹 페이지를 최적화하고 싶거나 필요한 경우 이제 두 가지 옵션이 있습니다:
- 고정된 상자 없이 수행합니다.
- IE용 핵 사용.
핵을 사용하려면 http://thestyleworks.de/tut-art/iewinfixed.shtml 웹사이트를 추천합니다. 이 웹사이트는 작은 JavaScript를 사용하여 이 브라우저에 맞게 고정 상자를 최적화하는 방법을 보여줍니다.
