Jade_o.o
[css] position 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-position</title>
<link rel="stylesheet" href="./attr3_postion.css">
</head>
<body>
<h2>position(static, relative, absolute, fixed)</h2>
<!-- <div class="position-static">static</div>
<div class="position-relative">relative</div>
<div class="position-absolute">absolute</div>
<div class="position-fixed">fixed</div>
<div class="position-relative">relative</div>
<div class="container">
<div class="position-absolute">relative</div>
</div> -->
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
html 코드
body{
background: linear-gradient(white,orange);
height: 2000px;
margin: 0;
padding:0;
}
div{
width:100px;
height: 100px;
font-weight: 700;
text-align: center;
border:1px solid gray;
line-height: 100px;
}
/* position-static
- static은 기본값, 작성하지 않아도 됨
- top, bottom, left, right 속성 적용 안됨
*/
.position-static{
background-color: pink;
position: static;
top:50px;/*static 기본값이라 top이 적용 안됨*/
}
/* relative
- 일반적인 문서 흐름에 따라서 배치가 됨(자기 자리 보준)
- 기준점이 자기 자신으로 배치됨
*/
.position-relative{
position: relative;
background-color: aquamarine;
left:100px;
/* right: 50px; */
}
/* absolute
- static이 아닌 값을 갖는 제일 가까운 조상 기준
- 문서 흐름을 벗어남 (자기 자리가 없어짐)
*/
.position-absolute{
position: absolute;
background-color: gold;
top:0;
right: 0;
}
/* fixed
- viewport 기준으로 특정 위치에 배치
- 스크롤 되어보 움직이지 않음 > header 제작시 많이 이용
*/
.position-fixed{
position: fixed;
background-color: coral;
top:0;
}
.container{
width:400px;
height: 300px;
position: relative;
}
.container div{
width:100px;
height: 100px;
border-radius: 50px;
position: absolute;
}
.container div:nth-child(1){
background-color: #9afaff;
left:10px;
}
.container div:nth-child(2){
background-color: #84ff8d;
left:50px;
z-index: 1;
}
.container div:nth-child(3){
background-color: #ffeb88;
left:100px;
}
css 코드
코드 실행 시 결과창
'CSS' 카테고리의 다른 글
[css] display:flex (2) | 2024.01.11 |
---|---|
[css] background 속성 (0) | 2024.01.11 |
[css] 박스 모델 속성 (0) | 2024.01.11 |
[css] 문자 관련 속성 (0) | 2024.01.11 |
[css] css 공부 정리1_css 기본 정의 (0) | 2024.01.11 |