배치 방법 지정 position
원하는 요소를 원하는 위치에 지정할 수 있다.
| static | 문서의 흐름에 맞춰 배치 (기본값) |
| relative | 문서의 흐름에 맞춰 위치값 지정하여 배치 |
| absolute | position:relative인 부모 요소가 기준 |
| fixed | 브라우저 창이 기준 (스크롤 해도 위치 그대로) |
absolute를 사용하려면
부모 요소에 position:relative라고 지정해야
원하는 대로 배치가 가능
fixed는 브라우저 창을 기준으로 위치를 지정하기 때문에
스크롤을 마구 움직여도 위치가 그대로이다.
또 위치값을 무조건 지정해줘야 화면에 나타난다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position 속성으로 요소 위치 지정하기</title>
<style>
p {
width:500px;
height:200px;
background-color:pink;
border:1px solid black;
line-height:2;
}
#static {position:static;}
#relative-1 {position:relative;} /*위치값을 지정하지 않아서 position:static으로 한것과 다름 없이 나타남*/
#relative-2 { /*원래 나타나는 위치에서 left에서 100px 떨어지고, top에서 -50px 떨어지게(마이너스니까 위로 붙게)이동*/
position:relative;
left:100px;
top:-50px;
}
#fixed {
width:100px;
height:100px;
background-color: skyblue;
position:fixed;
right:30px;
top:30px;
}
</style>
</head>
<body>
<p id="static">Ex et adipisicing voluptate ... amet cupidatat. </p>
<p id="relative-1">Lorem ipsum ... exercitation voluptate. </p>
<p id="relative-2">Excepteur voluptate ... excepteur excepteur. </p>
<p id="fixed"></p>
</body>
</html>
더보기
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.
'CSS' 카테고리의 다른 글
| 연결 선택자 (0) | 2022.11.16 |
|---|---|
| 배경 이미지 지정하기 (0) | 2022.11.15 |
| 웹 문서의 레이아웃 만들기 (2) | 2022.11.15 |
| 여백 조절하기 (0) | 2022.11.15 |
| 테두리 스타일 지정하기 (0) | 2022.11.13 |