반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 요소의 위치 지정</title>
<style>
/*
position 속성 - 텍스트나 이미지 요소를 원하는 위치에 배치
position 속성값
static - 문서의 흐름에 맞춰 배치
relative - 위치값을 지정할 수 있다는 점을 제외하면 static과 동일
absolute - relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
fixed - 브라우저 창을 기준으로 위치를 지정해 배치
*/
p {
width: 500px;
height: 300px;
border: 1px solid silver;
background-color: #eee;
line-height: 2;
}
#static {
position: static;
}
#relative-1 {
position: relative;
}
#relative-2 {
position: relative;
left: 100px;
top: -50px;
}
#fixed {
width: 100px;
height: 100px;
background-color: #222;
position: fixed;
right: 30px;
top: 30px;
}
</style>
</head>
<body>
<p id="static">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu
sint aute sunt
proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua
laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
<p id="relative-1">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur
elit exercitation.
Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor
ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet
laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure
anim aute.</p>
<p id="relative-2">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum
commodo quis quis et
ad. Incididunt adipisicing enim laboris voluptate.</p>
<p id="fixed">fixed</p>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 2일차 float,clear (0) | 2023.05.11 |
|---|---|
| CSS - 2일차 display (0) | 2023.05.11 |
| CSS - 2일차 padding, margin (0) | 2023.05.11 |
| CSS - 1일차 list-style (0) | 2023.05.10 |
| CSS - 1일차 폰트(텍스트꾸미기, 대소문자변환, 글간격) (0) | 2023.05.10 |