CSS에서 가장 일반적으로 사용되는 레이아웃 속성은 Float( CSS 부동 속성 Float에 대한 자세한 설명 )이고 다른 하나는 CSS 위치 지정 속성인 Position입니다.
1.위치:정적
모든 요소의 기본 위치 지정은 position:static입니다. 이는 요소가 위치를 지정하지 않고 문서에서 있어야 할 위치에 나타나는 것을 의미합니다.
일반적으로 이전에 설정된 위치 지정을 재정의하려는 경우가 아니면 position:static을 지정할 필요가 없습니다.
#div-1 {
위치:정적;
}
2. 위치:상대
position:relative를 설정하면 위쪽, 아래쪽, 왼쪽, 오른쪽을 사용하여 문서에 표시되어야 하는 위치를 기준으로 요소를 이동할 수 있습니다. [이는 요소가 실제로는 여전히 문서의 원래 위치를 차지하고 있지만 문서의 원래 위치를 기준으로 시각적으로 이동된다는 것을 의미합니다.]
#div-1 {
위치:상대적;
상단:20px;
왼쪽:-40px;
}
3. 위치:절대
position:absolute를 지정하면 요소가 문서 외부(즉, 문서 내에서 더 이상 위치를 차지하지 않음)가 되어 설정된 상하, 좌, 우에 따라 정확하게 위치를 지정할 수 있습니다.
#div-1a {
위치:절대;
상단:0;
오른쪽:0;
너비:200px;
}