web/html css

[css] position

xudegloss 2023. 3. 19. 21:42

1. position이란?

html 요소를 배치하는 방식을 결정하는 속성이다. position의 종류에 따라서 top, bottom, left, right 방향 기준으로 요소의 좌표값을 변경할 수 있다.

position 속성을 이용하여 원하는 위치에 배정할 수 있다.

2. position 종류

- static : default 

- relative : 원래 있던 자리 기준으로 위치를 조정한다. top, bottom, left, right 적용 불가능하다.

- absolute : 절대 좌표 기준으로 위치를 조정한다. top, bottom, left, right 적용 가능하다.

- fixed : 스크롤과 무관하게 뷰포트 기준으로 위치 적용 가능하다. 즉, vw와 vh 기준으로 적용된다.

- sticky : 부모 요소 좌표 기준으로 위치 적용 가능하다. static + fixed

 

위는 fixed를 이용하고 아래는 sticky를 이용하여 해더를 만들었다. 

fixed를 이용한 해더 만들기 뷰포트 맨 위 또는 맨 아래에 메뉴 또는 해더를 만드는 경우에 편리해보인다. 해더 부분에 스크롤이 닿지 않는 모습을 볼  수 있다. 중간에 만드는 경우, 위치를 계속 확인하면서 조정해야 하기 때문에 불편하다.
sticky를 이용한 해더 만들기 중간에 메뉴 또는 해더를 만드는 경우에 편리해보인다. fixed에 비하여 중간에 메뉴 또는 해더를 만드는 것이 편리하다. 그리고 해더 부분까지 스크롤이 닿는 모습을 볼 수 있다.

3. absolute 특징

부모 여러 개인 경우 relative 설정한 부모 기준으로 위치가 조정된다. 따라서 원하는 위치를 가진 부모에 relative 적용하기.
부모가 없는 경우 body 태그를 기준으로 위치가 조정된다.

4. html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Position Practice</title>
    <link rel="stylesheet" href="./position__practice.css" />
  </head>
  <body>
    <div class="container">
      <div class="static">
        <span class="item">Box 1</span>
        <span class="item">Box 2</span>
        <span class="item">Box 3</span>
      </div>
      <div class="relative">
        <span class="item">Box 1</span>
        <span class="item">Box 2</span>
        <span class="item">Box 3</span>
      </div>
      <div class="absolute">
        <span class="item">Box 1</span>
        <span class="item">Box 2</span>
        <span class="item">Box 3</span>
      </div>
    </div>
    <div class="menu__container">
      <div class="fixed__container">
        <header>
          <h1>Brand</h1>
          <nav>
            <span>Menu1</span>
            <span>Menu2</span>
            <span>Menu3</span>
          </nav>
        </header>
        <main>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
          <p>This is the main area.</p>
        </main>
      </div>
      <div class="sticky__container">
        <nav class="sticky__menu">
          <ul class="sticky">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
          </ul>
        </nav>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
          dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
          occaecat cupidatat non proident, sunt in culpa qui officia deserunt
          mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </body>
</html>

5. css 코드

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
}

.container {
  background-color: lime;
}

.container div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.container .item {
  border: 1px solid black;
  padding: 20px;
}

.item:nth-of-type(1),
.item:nth-of-type(3) {
  background-color: tomato;
}

.item:nth-child(2) {
  background-color: yellow;
}

/* 기본값 */
.static {
  position: static;
}

/* 상대적인 위치 */
.relative .item:nth-child(1) {
  position: relative;
  top: -50px;
  left: 300px;
}

.relative .item:nth-child(2) {
  position: relative;
  top: 50px;
  left: 300px;
}

/* 절대적인 위치 */
.container {
  position: relative;
}

.absolute {
  position: absolute;
  top: 30px;
  left: 0;
}

/* fixed와 sticky로 메뉴 만들기. */
.fixed__container {
  height: 200px;
  overflow: auto;
  margin-top: 150px;
  background-color: #eeeeee;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 200px;
  height: 75px;
  padding: 1rem;
  color: white;
  background: teal;
  font-weight: bold;
}

/* sticky로 메뉴 만들기. */
.sticky__container {
  background-color: #eeeeee;
  overflow: auto;
  height: 200px;
  margin-top: 10px;
}

.sticky__menu {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}

.sticky {
  background-color: deepskyblue;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
  color: white;
  font-weight: 700;
}

p {
  padding-top: 20px;
}

6. z-index

 position을 무시하고 어떤 요소가 화면에 먼저 보여줄 것 인지 지정하는 요소이다.

z-index의 숫자가 크면 클 수록, 더 적은 숫자를 가진 위치를 덮어버린다. 주의할 점은 position이 설정되어 있지 않으면 작동하지 않는다. 따라서 position static은 적용되지 않는다.

이런 느낌으로 어떤 요소가 어떤 요소를 덮어버리는지 결정할 수 있다.

7. html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./z-index.css" />
    <title>z-index</title>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
        <div class="box box4">Box 4</div>
        <div class="box box5">Box 5</div>
      </div>
    </div>
  </body>
</html>

8. css 코드

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  background-color: tomato;
  margin-top: 50px;
  margin-left: 50px;
}

.wrapper {
  background-color: aqua;
  position: relative;
}

.box {
  border: 3px solid black;
  padding: 10px;
  width: 100px;
  text-align: center;
}

.box:nth-of-type(2n) {
  background-color: chartreuse;
}

.box:nth-of-type(2n + 1) {
  background-color: yellow;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

.box2 {
  position: absolute;
  top: 30px;
  left: 50px;
  z-index: 3;
}

.box3 {
  position: absolute;
  top: 60px;
  left: 100px;
  z-index: 2;
}

.box4 {
  position: absolute;
  top: 90px;
  left: 150px;
  z-index: 1;
}

.box5 {
  position: absolute;
  top: 120px;
  left: 200px;
  z-index: 0;
}
저작자표시

'web > html css' 카테고리의 다른 글

[css] grid Layout  (0) 2023.03.20
[css] html 요소에 애니메이션 주기  (0) 2023.03.19
[css] 배경과 색상  (0) 2023.03.10
[css] 캐스케이딩  (0) 2023.03.09
[css] 단위  (0) 2023.03.09

'web/html css'의 다른글

  • 현재글[css] position

관련글

티스토리툴바