언어 & 기술 스택/HTML & CSS & JS

[CSS] Position relative와 absolute 활용

github.com/zlrloy 2023. 6. 16. 15:36

 

HTML가 순서대로 작성한 코드대로 화면에 보여졌다면,

CSS의 Position 속성은 원하는 요소에 위치를 지정(속성:top, bottom, left, right)할 수 있다.

 

Position의 사용값은 5가지이다.

  • static : 기본값
  • relative : 기본 위치에서 상대적으로 배치
  • absolute : 가장 가까운 상위 요소 기준으로 배치
  • fixed : 지정된 위치에 고정
  • sticky : 스크롤시 상위 요소 기준으로 지정된 위치에 고정

 

 

아래 이미지를 구현

 

1. HTML 구조

[HTML]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div>
    <input type="text" placeholder="검색어 입력">
    <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
    </div>
  </body>
</html>

 

  • <input> 태그로 검색어 입력창을, <img> 태그로 돋보기 이미지를 추가한다.
  • 두 개의 요소를 <div>로 감싸준다.

 

 

 

2. 스타일링

[CSS]

div {
  position: relative;      → parents

  width: 300px;
}

 

input {
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

 

img {
  position: absolute;     → child
  width: 17px;
  top: 10px;
  right: -12px;
  margin: 0;
}

 

  • 검색 입력창을 스타일링한다.
  • div position을 부모로 지정한다.
  • 돋보기 이미지를 자식으로 지정하여 부모 요소를 기준으로 위치를 설정한다.