공부노트/CSS3

[CSS] Position

Reload0213 2021. 8. 29. 22:06

※  position :  웹 문서 안의 요소들을 배치해주는 속성 웹 문서를 만들 때 배치와 관련해서 중요하게 사용되는 속성position으로 쓸 수 있는 값으로는 static, relative, absolute, fixed가 있다. 

 

 

● static => 요소를 단순히 위에서 아래로 흐름에 맞춰 배치할 경우 사용하는 속성. 기본적으로 position을 선언하지 않았을 시 default 값이 static이다. 인라인은 좌에서 우로 블록태그는 위에서 아래로 배치 되는 정적인 배치를 할 경우 static을 통해 배치가 가능하다.

 

 

    <style>
        div {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
        #d1 {
            background-color: burlywood;
        }
        #d2 {
            background-color: cornflowerblue;
        }
        #d3 {
            background-color: lime;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>
</html>

           

●  relative => static일 시 배치된 위치를 기준으로 상대적인 이동을 할 경우 사용되는 속성. 안쪽의 블럭들의 자유로운 이동을 위해 static 속성을 없애기 위한 용도로 사용되기도 한다. 옮기지  않으면 기존 static 속성의 위치와 동일하지만 static과는 달리 left, top, bottom, right 속성을(offset) 활용해서 위, 아래, 좌 우 기준으로 이동이 가능하다는 장점이 있다.

            

< - 아래의 d2박스의 position을 relative으로 바꿔주고 offset 값을 주고 이동 시킨모습

아래에서 100px 왼쪽에 50px 띄워준 모습

 <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
        #d1 {
            background-color: burlywood;
        }
        #d2 {
            background-color: cornflowerblue;
            bottom: 100px;
            left: 50px;
            position: relative;
        }
        #d3 {
            background-color: lime;
         
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>
</html>

      

●  absolute => 부모와의 링크가 끊어지며 좌측 상단을 기준으로 블럭을 자유 자재로 배치(절대적인 위치)할 때 사용하는 속성.  이 속성은 자신이 움직일 수 있는 범위를 static이 아닌 부모를 기준으로 정하여 움직이며, 만약 자신의 부모가 static 일 경우 static이 아닌 다음 상위 부모를 자신이 움직일 수 있는 범위로 인식한다. 만약 모든 부모가 static일 시 absolute속성의 블럭의 위치되는 범위는 body가 된다.

 

           

 

 

    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
        #d1 {
            background-color: burlywood;
        }
        #d2 {
            background-color: cornflowerblue;
            font-size: 4rem;
        }
        #d3 {
            background-color: lime;
        }
        #d4 {
            background-color: tomato;
            width: 150px;
            height: 100px;
            position: absolute;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2">부모 
        <div id="d4">자식</div>
    </div>
    <div id="d3"></div>
</body>
</html>

 

 

 

 

● fixed =>   absolute 부모 범위를 기준으로 하였다면 fixed는 보이는 화면을 기준으로 움직인다. 문서를 스크롤하여 움직여도 해당 위치에 고정되어 절대 움직이지 않는다. 스크롤과는 무관한 고정형 인터페이스를 제공하여야 하는 경우  많이 사용된다.