프로그래밍/HTML&CSS

[HTML & CSS] position : fixed

삐제제 2020. 11. 8. 18:55

HTML문서에서 쓰이는 CSS 속성중 position 이라는 속성이 있습니다.

 

이 position 속성에서 자주 쓰이는 속성들은 대표적으로 fixed, relative, absolute 가 있습니다.

 

static 속성이있는데 이것은 디폴트 값이라고 생각하시면 됩니다.

 

아 그리고 body 태그는 기본값으로 position : relative 값을 가지고 있습니다.

 

이번 포스트 에서는 fixed 에 대하여 먼저 포스팅 하려고 합니다.

 

fixed는 position : fixed 값을 가지고있는 엘리먼트를 웹에 고정시킵니다.

 

그리고 이 속성값을 줌으로써 top, left, right, bottom 속성을 이용할 수 있습니다.

우선, 사진으로 봅니다.

div를 태그를 이용해 박스 두개를 만들었고, 현재 blue박스에 fixed속성이 적용되어있습니다.
휠을 내렸더니 고정된 위치에서 blue박스가 따라옵니다.

 

아래는 코드입니다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML & CSS</title>
        <style>
            body{
                height: 1000vh;
                margin: 50px;
            }

            div {
                width: 300px;
                height: 300px;
                background-color: wheat;
            }

            #red {
                width: 300px;
                height: 300px;
                background-color: red;
            }

            #blue {
                position: fixed;
                width: 300px;
                height: 300px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="blue"></div>
    </body>
</html>

fixed 태그는 적용된 위치부터 고정되어 움직입니다. 만약 red태그에 fixed를 주었다면, 처음엔 blue박스를 가리게되고, 휠을 내리면 red박스가 따라서 내려왔을것입니다.

red박스에 fixed가 적용된 모습입니다 (blue박스에는 fixed속성이 없는 상태)
처음 사진에서 휠을 약간 내려준 사진입니다.

 

이 정도면 fixed 속성이 대충 어떤 역할을 하는지 알 수 있을것 같습니다. 

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

CSS states MDN  (0) 2020.12.06
[HTML & CSS] position : relative , absolute  (0) 2020.11.08
[HTML&CSS]Flex box  (0) 2020.11.04
HTML & CSS Class 와 id  (0) 2020.10.18
블럭과 인라인  (0) 2020.10.18