- position: fixed
fixed는 말그대로 고정한다는 뜻이다.
스크롤을 내려도 fixed한 태그는 화면의 고정했던 위치에서 벗어나지 않는다.
예를들어 네이버의 하단 우측 '다크모드'와 '페이지 상단으로 이동'이 있다.
사용법은 매우간단하다.
<style>
selector {
position: fixed;
right: 0;
bottom: 0;
}해당코드는 우측 하단을 위치하는 코드이고, 상,하,좌,우 위치값을 표기하여 위치를 고정할 수 있다.
- position: relative
position: relative; 자체로는 특별한 의미가 없습니다.
딱히 어느 위치로 이동 하지는 않습니다.
하지만 위치를 이동시켜주는 top, right, bottom, left 사용할 수 있게 되고, 해당 프로퍼티가 있어야 위치에서 이동할 수 있습니다.
top, right, bottom, left 는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다.
- position: absolute
position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있습니다.
어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 됩니다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됩니다.
absolute를 쓸 경우 꼭, 기준이 될 부모에게 position: relative; 를 부여해야 합니다.
replit문제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
input {
width: 100%;
border: 1px solid #bbb;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
}
.search {
position: relative;
width: 300px;
}
img {
position: absolute;
height: 17px;
width: 17px;
top: 10px;
right: -12px;
margin: 0;
}
</style>
</head>
<body>
<div class="search">
<input type="text" placeholder="검색어 입력">
<img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
</div>
</body>
</html>
위의 코드는 input태그를 덮는 div박스에 position: relative; 를 적용 하였고, 이를 적용하지 않으면,
위의 사진처럼 body를 기준으로 position 위치값이 지정된다.
안녕하세요 인터랙션한 웹 개발을 지향하는 프론트엔드 개발자 입니다. https://kimjunho97.tistory.com => 블로그 이전 중