프론트엔드/css
[유노코딩 css 12강] position 속성값 중 relative,absolute
응개야
2023. 8. 3. 21:10
position 이렇게 배치할게~
top 윗면에서부터 얼마큼 떨어뜨린다
right 오른쪽기준 얼마큼 떨어뜨린다
bottom 아랫면에서부터 얼마큼 떨어뜨린다
left 왼쪽면에서 얼마큼 떨어뜨린다
이번에 배울 값들은 배경색으로 칠해놨음.
static 기본값
relative 자기 원래 위치 값에 따라 오프셋 적용
absolute 상위 요소 (가장 가까운 포지션 지정 요소) 기준으로 어찌보면 상대적으로. 오프셋을 적용
fixed 지정한 위치 고정 스크롤 이동에도 꼼짝 않는다.
sticky 스크롤 되는 가장 가까운 상위 요소에 오프셋 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:100px; height: 100px;
background-color: red;
position: relative;
top: 100px; left: 100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
position: relative;를 하니
브라우저가 기준이니 100픽셀값보다 떨어져 div가 만들어졌다.
기본값 기준으로 떨어질 수 있다 오프셋이라고 한다.
| absolute란 가장 가까운 상위 요소 포지션에 붙어 오프셋 위치를 잡는 속성이다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: yellow;
position: relative;
}
.abs {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div></div>
<div>
<div class="abs"></div>
</div>
</body>
</html>
상위 요소인
<div>박스가 기준이 되고
그 박스 기준의 100px;부터 떨어져있어라 하면은
이렇게 2번쨰 박스가 기준이 되어
top: 100px;
보여지는 것.