CSS - position

김석환·2020년 10월 20일
1

CSS

목록 보기
8/18
post-thumbnail

1. position 속성

position 속성은 요소의 위치를 정의한다.
top left right bottom 속성과 함께 사용하여 위치를 지정한다.

1.1 static

static은 position속성의 기본값이다.
기본적인 플로우에 따라 위에서 아래서 좌에서 우로 배치되면 자식요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.
좌표 속성(top bottom left right)를 같이 사용할 수 없다

1.2 relative

기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 속성을 사용하여 위치를 이동시킨다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .parent {
      width: 150px;
      height: 150px;
      background: #d3d3d3;
      border: 1px solid #d3d3d3;
      margin: 50px;
    }
    .relative-box {
      position: relative;
      top: 100px; left: 100px;
      background: #8f53a7;
      color: #30f883;
      font-weight: bold;
      text-align: center;
      line-height: 150px;
    }
    </style>
    <title>Document</title>
</head>
<body>
  <div class="parent">
    <div class="relative-box">relative 속성</div>
  </div>
</body>
</html>

1.3 absolute

static을 제외한 부모 요소 또는 가장 가까이 있는 조상요소를 기준으로 좌표 프로퍼티만큼 이동한다.
만일 부모 또는 조상 요소가 static인 경우 document body 기준으로 위치한다.
absolute를 지정하게 되면 다른 요소가 먼저 위치를 갖고있어도 뒤로 밀리지 않고 덮어쓰게 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .parent {
      width: 200px;
      height: 200px;
      background: #d3d3d3;
      border: 1px solid #d3d3d3;
      margin: 50px 0 0 300px;
      position: relative;
    }
    .absolute-box {
      position: absolute;
      height: 200px; width: 200px;
      top: 50px; left: 50px;
      color: #30f883;
      font-weight: bold;
      text-align: center;
      background: #8f53a7;
      line-height: 200px;
    }
    </style>
    <title>Document</title>
</head>
<body>
  <div class="parent">
    <div class="absolute-box">absolute(부모속성이 있음)</div>
  </div>
  <div class="absolute-box">absolute(부모속성이 없음)</div></body>
</body>
</html>

1.4 fixed

부모 요소와 관계없이 브라우저의 viewport기주으로 좌표프로퍼티를 사용하여 위치를 이동시킨다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

2. z-index 속성

z-index 속성에 큰 숫자값을 지정할수록 위에 출력된다.
position 속성이 static이외인 요소에만 적용된다.

3. overflow 속성

overflow 속성은 자식요소가 부모요소의 영역을 벗어났을 때 처리 방법을 정의한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    div {
      width: 150px;
      height: 150px;
      padding: 10px;
      margin: 30px;
      font-size: 1.2em;
      border-radius: 6px;
      border-color: gray;
      border-style: dotted;
      float: left;
    }
    .visible { overflow: visible; }
    .hidden  { overflow: hidden; }
    .scroll  { overflow: scroll; }
    .auto    { overflow: auto; }
    </style>
    <title>Document</title>
</head>
<body>
  <h1>overflow</h1>
  <div class="visible"><h3>visible</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div class="hidden"><h3>hidden</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div class="scroll"><h3>scroll</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div class="auto"><h3>auto</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>
</html>

0개의 댓글