[CSS] Position

혤·2022년 12월 20일

CSS

목록 보기

7/9

기존 코드 분석이나 리팩토링을 하는 과정에서 오히려 기초인 HTML, CSS가 부족하단 생각이 매일매일 든다.
요즘 매우 빡치는(...^^) 기존 코드 분석을 하며 새롭게(?) 학습한 position에 대해 정리해보자!

[ 오늘의 TIL ]
부모에겐 relative, 자식에겐 absolute를 주고, 자식 요소에 bottom 또는 top을 0으로 주면 부모 컴포넌트의 아래 또는 위에 알아서 붙어다닌다!

📌 position

📍 position 이란?

position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정할 수 있다.

📍 position 속성

📝 static

position 기본값

📝 relative

요소 자기 자신을 기준으로 배치한다.
즉, 일반적인 문서 흐름에 따라 배치하므로 요소 자기 자신의 원래 위치 (static일 때 위치)를 기준으로 배치한다.

📝 absolute

부모 요소를 기준으로 배치한다.
즉, 요소를 일반적인 문서 흐름에서 제거하고 가장 가까운 위치에 있는 부모 요소를 기준으로 배치한다.
부모 중 position을 가진 요소가 없다면 초기 컨테이닝 블록 (<body>요소)를 기준으로 삼는다. (static을 제외한 값)

📝 fixed

ViewPort 기준으로 배치한다.

📝 stickey

스크롤 영역을 기준으로 배치한다.

📌 Top, Bottom, Left, Right 속성

position을 통해 기준점을 잡았다면, 요소의 위치를 옮길 수 있다.
요소의 position 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽의 거리를 설정한다.

📝 top

요소의 position 기준에 맞는 위쪽에서의 거리를 설정한다.

📝 bottom

요소의 position 기준에 맞는 아래쪽에서의 거리를 설정한다.

📝 left

요소의 position 기준에 맞는 왼쪽에서의 거리를 설정한다.

📝 right

요소의 position 기준에 맞는 오른쪽에서의 거리를 설정한다.

📌 player에 controller 위치 잡기 예시

[ index.tsx]
  <S.Wrapper>
     <S.Container
        id="player-container"
        ref={playerContainer}
     >
        <S.ShareWrapper id="share">
          <S.ShareButton onClick={onClickShare}>
            <ShareIcon
              fontSize="large"
              sx={{
                color: "white",
              }}
            />
          </S.ShareButton>
        </S.ShareWrapper>

        <S.Player
          id="hls-player"
          sx={{ minWidth: "100%", minHeight: "100%" }}
        ></S.Player>

        <S.TimeWrapper
          id="time-wrapper"
          sx={{ display: hover ? "" : "hidden" }}
        >
           <PlayTime videoInfo={videoInfo} />
        </S.TimeWrapper>
     </S.Container>
 </S.Wrapper>

[ styles.ts ]
import styled from "@emotion/styled";
import { Box, IconButton, Slider } from "@mui/material";

export const Wrapper = styled(Box)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  min-height: 100%;
  background-color: #313645;
  color: white;
  position: relative;
`;

export const Container = styled(Box)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  min-height: 100%;
  z-index: 1000;
`;

export const ShareWrapper = styled(Box)`
  display: flex;
  justify-content: flex-end;
  width: 100%;
  z-index: 1001;
  position: absolute;
  top: 0;
`;
.
.
.