웹페이지

CSS STEP 13 - Position

IT의 큰손 2023. 4. 17. 12:47
728x90

★ 요소의 위치, Position

  • 1. padding > 부모가 자식의 위치 지정
  • 2. margin > 스스로 위치 지정
  • 3. position > 정석(CSS1 ~ CSS3)
  • 4. transfom > 정석(CSS3)

★ Position

  • 좌표값 사용 > 위치 지정
  • x(left), y(top)
  • 좌표를 지정하는 방식이 여러개 제공
  • 1. position : static;
1. position : static;
    - 기본값
    - 정적 좌표
    - 워드 프로세스 방식 > FlowLayout 방식
        - 코딩 순서대로 출력되는 방식
            - 먼저 코딩 > 위에 배치, 같은줄 : 왼쪽에 배치
            - 나중에 코딩 > 아래에 배치, 오른쪽에 배치
  • 2. position : absolute;
2. position : absolute;
    - 절대 좌표
    - left, top
    - 문서의 좌측 상단을 기준으로 한다.(X) 
    - 자신의 직계 조상 중 가장 처음으로 만나는 태그 중 position이 static이 아닌 태그를 기준으로 한다.
    - 원래 있던 공간이 사라진다.
  • 3. position : relative;
3. position : relative;
    - 상대 좌표
    - left, top
    - 자신의 위치를 기준으로 한다.
    - 원래 있던 공간이 그대로 유지된다.
  • 4. position : fixed;
4. position : fixed;
    - 고정 좌표
    - left, top
    - 브라우저 창(화면)의 좌측 상단을 기준으로 한다.
    - 스크롤에 반응하지 않고 그대로 유지된다.
    - 원래 있는 공간이 사라진다.
  • 5. position : sticky;
 5. position : sticky;
    - 고정 좌표
    - left, top
    - 브라우저 창(화면)의 좌측 상단을 기준으로 한다.
    - 화면에 보일때는 static처럼 동작, 사라질때는 fixed 처럼 동작
    - 스크롤에 반응하지 않고 그대로 유지된다.
    - 원래 있던 공간이 그대로 유지된다.

 

 

■ 2. position : absolute 예제

  • 소스코드
<style>
.box {
    border : 5px solid black;
    width : 200px;
    height: 200px;
}

#box1 { background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}

#box2 {
    position : absolute;
    left : 0px;
    top : 0px;
}

</style>
<body>

    <h1>position</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    
</body>
  • 실행 결과

실행 결과 1

 

■ 3. position : relative 예제

<style>
.box {
    border : 5px solid black;
    width : 200px;
    height: 200px;
}

#box1 { background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}

#box2 {
    position:relative;
    left : 100px;
    top : 0px;
}

</style>
<body>

    <h1>position</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    
</body>
  • 실행 결과

실행 결과 2

 

■ 4. position : fixed 예제

<style>
.box {
    border : 5px solid black;
    width : 200px;
    height: 200px;
}

#box1 { background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}

#box2 {
    position : fixed;
    left : 0px;
    top : 0px;
}

</style>
<body>

    <h1>position</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    
</body>
  • 실행 결과

실행 결과 3 : 스크롤을 내려도 그대로위치

 

■ 5. position : sticky 예제

<style>
.box {
    border : 5px solid black;
    width : 200px;
    height: 200px;
}

#box1 { background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}

#box2 {
    position : sticky;
    left : 0px;
    top : 0px;
}

</style>
<body>

    <h1>position</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    
</body>
  • 실행 결과

실행 결과 4 : 고정되있다가, 스크롤이 움직이면 따라움직임

 

■ 부모자식 상자에 대한 예제

<style>
	#b1, #b2, #b3 {
        border : 5px solid black;
    }

    #b1 {
        width: 500px;
        height : 400px;
        background-color: tomato;
        position : absolute;
        left : 500px;
        top : 200px;
    }

    #b2 {
        width: 400px;
        height : 300px;
        background-color: gold;
    }

    #b3 {
        width: 300px;
        height : 200px;
        background-color: cornflowerblue;
    }

</style>

<body>

    <h1>absolute</h1>

    <div id="b1">
        상자1
        <div id="b2">
            상자2
            <div id="b3">
                상자3
            </div>
        </div>
    </div>
    
</body>
  • 부모가 움직이면 자식이 같이 움직임
  • 실행 결과

실행 결과 : 부모가 같이 움직일 경우

  •  모든 자식 박스에 position을 주었을 경우
<style>
	#b1, #b2, #b3 {
        border : 5px solid black;
    }

    #b1 {
        width: 500px;
        height : 400px;
        background-color: tomato;
        position : absolute;
        left : 500px;
        top : 200px;
    }

    #b2 {
        width: 400px;
        height : 300px;
        background-color: gold;
        position : absolute;
        left : 0px;
        top : 0px;
    }

    #b3 {
        width: 300px;
        height : 200px;
        background-color: cornflowerblue;
        position:absolute;
        left : 0px;
        top : 0px;
    }

</style>

<body>

    <h1>absolute</h1>

    <div id="b1">
        상자1
        <div id="b2">
            상자2
            <div id="b3">
                상자3
            </div>
        </div>
    </div>
    
</body>
  • 실행 결과

모든 position을 주었을 경우, 가장 상위 박스의 position을 기준으로 위치함

 

★ Position 추가사항

  • left / right > x 좌표
  • top / bottom > y 좌표
  • 사용법
right : 0px;
bottom : 0px;
  • 사용 ex)
<style>

    #box1 {
        border : 1px solid black;
        width : 200px;
        height: 200px;
        background-color: gold;
        position : absolute;
        right : 0px;
        bottom : 0px;
    }

</style>

<body>
    <div id="box1" class="box">상자1</div>
</body>
  • 실행 결과

우측, 하단이 (0,0)으로 위치하게됨.

 

728x90
저작자표시 비영리 변경금지