본문 바로가기
코딩/Web

CSS Position

by Song1234 2024. 4. 9.

CSS Position

  • 요소의 위치를 결정하는 방식을 설정

1. 정적 위치 지정방식

  • static position (기본값)
  • HTML 요소의 위치를 결정하는 기본적인 방식
  • 단순히 웹페이지의 흐름에 따라 요소들이 위치를 결정하는 방식

2. 상대 위치 지정방식

  • relative position
  • HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
  • top, left, right, bottom 속성값을 사용하여 재설정함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상대 위치 지정방식</title>
    <style>
        div {width: 200px; padding: 20px;}
        .relative1 { background-color: deeppink; }
        .relative2 { 
            background-color: deepskyblue;
            position: relative;
            left: 200px;
            top: 100px;
        }
        .relative3 {
            background-color: gold;
            position: relative;
            right: 100px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <h2>상대 위치 지정방식</h2>
    <div class="relative1">상대 위치 지정방식1</div>
    <div class="relative2">상대 위치 지정방식2</div>
    <div class="relative3">상대 위치 지정방식3</div>
</body>
</html>

 

3. 고정 위치 지정방식

  • fixed position
  • 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
  • 뷰포트를 기준으로 위치를 설정하는 방식
  • top, left, right, bottom 속성값을 사용하여 재설정함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>고정 위치 지정방식</title>
    <style>
        #fx {
            position: fixed;
            width: 100px;
            height: 200px;
            background-color: gold;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <h2>고정 위치 지정방식</h2>
    <div id="fx"></div>
    <div id="content">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, possimus ducimus saepe rem eum, cumque ullam magnam sed dicta in eveniet, eligendi deserunt nobis architecto veritatis delectus odit consectetur praesentium!</p>
    </div>
</body>
</html>

 

스크롤을 내려도 고정

4. 부모태그를 이용한 고정 위치 지정방식

  • sticky position
  • fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위치값을 사용하는 방식
  • 익스플로러에서는 작동하지 않음
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스티키 지정방식</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 80px;
            background-color: gold;
        }
        .container {
            display: flex;
            flex-flow: row;
        }
        .content {
            width: 80%;
            height: 800px;
            background-color: deepskyblue;
        }
        .sidebar {
            position: sticky;
            top: 30px;
            width: 20%;
            background-color: deeppink;
            height: 400px;
        }
        .footer {
            background-color: yellowgreen;
            height: 100px;
        }
    </style>
</head>
<body>
    <h2>스티키 지정방식</h2>
    <header class="header">헤더</header>
    <main class="container">
        <section class="content">메인 컨텐트</section>
        <aside class=sidebar>sticky적용하기 </aside>
    </main>

    <footer class="footer">푸터</footer>
</body>
</html>

 

메인의 범위 내에서 만 움직임

5. 절대 위치 지정방식

  • absolute position
  • 뷰포트를 기준으로 위치를 설정하는 방식
  • 조상요소를 기준으로 위치를 저장할 수 있음
  • 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 설정
  • 조상요소를 기준으로 위치를 설정하려면 조상요소가 반드시 정적 위치 지정방식이 아니어야 함
  • top, left, right, bottom 속성값을 사용하여 재설정함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>절대 위치 지정방식</title>
    <style>
        #wrap {
            width: 500px;
            height: 500px;
            border: 3px solid red;
            position: relative;
        }

        .box{
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: deepskyblue;
        }

        #ab1 { top: 0; right: 0; }
        #ab2 { bottom: 0; left: 0;}
        #ab3 { bottom: 0; right: 0;}
        #ab4 { top: 0; left: 150px;}

    </style>
</head>
<body>
    <h2>절대 위치 지정방식</h2>
    <div id="wrap">
        <div class="box" id="ab1"></div>
        <div class="box" id="ab2"></div>
        <div class="box" id="ab3"></div>
        <div class="box" id="ab4"></div>
        <div class="box" id="ab5"></div>
    </div>
</body>
</html>

 

'코딩 > Web' 카테고리의 다른 글

CSS 레이아웃, flex  (0) 2024.04.11
CSS z-index, float, clear  (0) 2024.04.11
CSS 박스 모델  (0) 2024.04.09
CSS 배경  (0) 2024.04.09
CSS 텍스트  (0) 2024.04.08

관련글

티스토리툴바