<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul{background-color: yellow; height: 300px;}
#s1 li:nth-child(1){
background-color: blueviolet;
position: absolute;
left: 100px;
top: 30px;}
#s1 li:nth-child(2){
background-color: red;
position: absolute;
right: 0;
botton: 0;}
</style>
</head>
<body>
<section id="s1">
<h3>position: absolute</h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>
1) <body> 본문영역이 기준 좌표
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
#s1 li:nth-child(1){
background-color: blueviolet;
position: absolute;
left: 0;
top: 0;}
#s1 li:nth-child(2){
background-color: crimson;}
#s1 li:nth-child(3){
background-color: darkgreen;}
</style>
<head>
<body>
<section id="s1">
<h3>position:absolute</h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>
2) 부모영역을 기준으로 position:relative
-> 부모 : ul / 자식 : li
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul{
background-color: darkslategrey;
hegith: 300px;
position: relative;}
#s1 li:nth-child(1){
background-color: indianred;
position: absolute;
bottom:0;}
#s1 li:nth-child(2){
background-color: gold;}
#s1 li:nth-child(3){
background-color: deeppink;}
</style>
</head>
<body>
<section id="s1">
<h3>position:absolute</h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul{
background-color: darkslategrey;
width: 300px;
height: 300px;
position: relative;}
#s1 li:nth-child(1){
background-color: indianred;
position: absolute;
width: 100px;
bottom: 0;
right: 0;}
#s1 li:nth-child(2){
background-color:gold;}
#s1 li:nth-child(3){
background-color: deeppink;}
</style>
</head>
<body>
<section id="s1">
<h3>position:absolute</h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>
- position:absolute -> 절대적인 위치 / 부모요소를 기준으로 배치
- postition:relative -> 객관적인 위치 / 요소 자기 자신을 기준으로 배치
'CSS' 카테고리의 다른 글
| [CSS] fixed (0) | 2024.06.01 |
|---|---|
| [CSS] relative (0) | 2024.05.31 |
| [CSS] static (0) | 2024.05.31 |
| [CSS] position (0) | 2024.05.31 |
| [CSS] reset (1) | 2024.05.31 |
