AAtomic CSS

bottom

위치가 지정된 요소의 하단 오프셋을 설정합니다. position이 relative, absolute, fixed, sticky인 요소에서만 동작합니다.

클래스 패턴

b{N}{unit} 형태로 값을 지정합니다. 음수는 neg-b{N}{unit} 패턴을 사용합니다.

주의: border 클래스와의 구분

b1pxsolid000000은 border 단축 클래스입니다. 단위(px, rem, p)가 바로 붙으면 bottom이고, border 형식(크기+스타일+색상)이면 border입니다.

클래스CSS설명
b0bottom: 0하단에 붙임
b8pxbottom: 8px하단에서 8px 위
b16pxbottom: 16px하단에서 16px 위
b2rembottom: 2rem하단에서 20px 위
b5rembottom: 5rem하단에서 50px 위
b50pbottom: 50%부모 높이의 50% 위
babottom: auto기본값 (자동)
neg-b2rembottom: -2rem하단 아래로 20px 벗어남

시각적 비교

position이 설정된 부모 안에서 bottom 값에 따라 요소가 어떻게 이동하는지 확인하세요.

absolute 요소의 bottom 오프셋 비교

b0
b2rem
b5rem
b50p

b0은 하단에 붙고, 값이 커질수록 위로 이동합니다

클래스별 상세

b{N}{unit}bottom: {value}

위치가 지정된 요소의 하단 기준점에서의 거리를 설정합니다. px, rem, % 단위를 지원합니다.

<!-- 하단 고정 바 -->
<div class="pf b0 l0 w100p bg18181B py16px px2rem zi50">
  하단 고정 푸터 바
</div>

<!-- 하단 우측 플로팅 버튼 (FAB) -->
<button class="pf b2rem r2rem w5-6rem h5-6rem br100p bg6366F1 cFFFFFF bn cp df jcc aic zi50 fs2rem">
  +
</button>

<!-- absolute 하단 배치 -->
<div class="pr h20rem bg27272A br8px">
  <div class="pa b0 l0 r0 bg18181B p16px tac cFFFFFF">
    하단에 고정된 영역
  </div>
</div>

babottom: auto

bottom을 기본값(auto)으로 되돌립니다. 반응형에서 특정 breakpoint에서 bottom 위치를 해제할 때 유용합니다.

<!-- 반응형: 모바일에서 bottom 해제 -->
<div class="pa b2rem sm-ba sm-pr">
  데스크탑에서는 absolute + bottom: 2rem
  모바일에서는 위치 해제
</div>

neg-b{N}{unit}bottom: -{value}

음수 bottom 값을 설정합니다. 요소를 부모 하단 아래로 이동시킬 때 사용합니다.

<!-- 하단 밖으로 튀어나오는 요소 -->
<div class="pr mb4rem bg18181B p2rem br8px">
  <div class="pa neg-b2rem l50p bg6366F1 cFFFFFF py8px px16px br4px fs14px">
    아래로 삐져나옴
  </div>
  카드 콘텐츠
</div>

팁 & 주의사항

position 필수

bottom은 position: static(기본값)에서는 동작하지 않습니다. 반드시 pr, pa, pf, ps 중 하나와 함께 사용하세요.

고정 하단 요소 패턴

pf b0 l0 w100p는 화면 하단에 고정되는 바(footer bar, cookie banner 등)에 자주 사용됩니다.

top과 bottom 동시 설정

top과 bottom을 동시에 설정하면 요소의 높이가 늘어납니다. pa t0 b0은 부모의 전체 높이를 차지합니다.

toprightleftinsetposition