[html] position 속성을 absolute로 하는 것과 relative로 하는 것의 차이는?
chatGTP
`position` 속성을 `absolute`와 `relative`로 설정하는 것은 웹 페이지에서 요소의 위치를 조정하는 데 사용되는 두 가지 기본적인 방법입니다. 이 두 속성의 차이점은 요소가 상대적으로 배치되는 기준점과 주변 요소들과의 상호작용에 있습니다.
1. `position: relative;`
- 상대적인 위치 지정 방법입니다.
- 요소가 원래 있어야 할 위치를 기준으로 위치를 조정합니다.
- 다른 요소들과의 상호작용에서는 일반적인 문서 흐름에 따라 배치됩니다.
- `top`, `right`, `bottom`, `left` 등과 함께 사용하여 요소의 위치를 조정할 수 있습니다. 이 값들은 요소의 원래 위치로부터 얼마나 떨어져 있는지를 나타냅니다.
- 주변 요소들과의 상호작용에서 다른 요소들에게 영향을 미치지 않으며, 다른 요소들도 해당 요소의 위치를 고려하지 않습니다.
```html
<div style="position: relative; top: 20px; left: 30px;">
<!-- 이 요소는 원래 위치를 기준으로 top과 left에 지정된 값만큼 떨어진 위치에 배치됩니다. -->
</div>
```
2. `position: absolute;`
- 절대적인 위치 지정 방법입니다.
- 요소가 가장 가까운 "조상" 요소 중 `position` 속성 값이 `relative`, `absolute`, `fixed`, 또는 `sticky`인 요소를 기준으로 위치를 조정합니다.
- 만약 조상 요소들 중에 해당하는 것이 없다면, 문서의 최상위 요소(일반적으로 `<body>`)를 기준으로 위치를 조정합니다.
- 주변 요소들에 영향을 미치지 않고, 다른 요소들도 해당 요소의 위치를 고려하지 않습니다. 다른 요소들이 겹치는 현상이 발생할 수 있으므로 주의해야 합니다.
```html
<div style="position: relative;">
<div style="position: absolute; top: 20px; left: 30px;">
<!-- 이 요소는 상위 요소의 위치를 기준으로 top과 left에 지정된 값만큼 떨어진 위치에 배치됩니다. -->
</div>
</div>
```
요약하자면, `position: relative;`는 요소를 원래 있어야 할 문서의 흐름에 따라 배치하면서 상대적으로 이동시킬 수 있고, `position: absolute;`는 요소를 조상 요소 중 가장 가까운 요소를 기준으로 절대적인 위치에 배치합니다. 따라서 `absolute`로 설정된 요소는 다른 요소와 겹치는 현상이 발생할 수 있으므로 주의해서 사용해야 합니다.
'frontend > HTML' 카테고리의 다른 글
| 언제 class를 쓰고 언제 id를 쓰는지 (0) | 2023.07.23 |
|---|---|
| div는 큰 덩어리, section은 보다 구체적이고 분명한 덩어리 (0) | 2023.07.23 |
| 가로로 붙는 요소와 세로로 쌓이는 요소 (0) | 2023.07.23 |
| 컨테이너을 만드는 html 태그의 종류들 (0) | 2023.07.22 |
| section 태그가 추가된 이유 (0) | 2023.07.21 |
| html, img, 절대경로/상대경로 (0) | 2023.07.21 |
| inline or block (0) | 2023.07.21 |
| <div class=>`와 `<div id=>`의 차이 (0) | 2023.07.21 |
