CSS position

KHW·2021년 6월 1일
0

다양한 지식쌓기

목록 보기
22/48

자식태그가 left top right bottom 과 같은 값이 정해질때

  1. 자식태그가 postion:static일때 => 해당 내용무시
  2. 자식태그가 position:relative일때
    1) 부모태그가 position:relative, static일때 => 부모를 기준으로 적용
    2) 부모태그가 position:absolute일때 => absolute 형태로 부모가 offsetParent를 찾아가서 적용시킨다.
  3. 자식태그가 position:absolute일때
    1) 부모태그가 position: static일때 => offsetParent를 찾기 위해 계속 진행하며 그때 만들어진다.
    2) 부모태그가 position: relative일때 => 자식태그는 부모태그에서 offsetParent로 찾았으므로 적용시킨다. (normal flow로 그려졌을 때로부터의 차이값)
    3) 부모태그가 position: absolute일때 => 부모태그는 다시 offsetParent를 찾아가고 그 후 만들어진다.

1. 자식태그가 postion:static

  <!DOCTYPE html>
<html lang="en">
<head>
</head>
        <style>
            .parent{
                    border:1px solid black;
                    display: inline-block;
                    width:200px;
                    height:200px;
                }
                .child{
                    width:100px;
                    height:100px;
                    background-color: red;
                    position:static;
                    left:30px;
                    top:30px;
                }
        </style>
<body>
    <div class='parent'></div>
    <div class='parent'>
        <div class='child'></div>
    </div>

</body>    
</html>

left top같은 내용 적용 X


2. 자식태그가 position:relative

1) 부모태그가 relative or static

부모태그에 left, top, right, bottom 관련 내용이 있을경우는 또 그다음 부모태그 참고하나 관련 내용이 없을 경우 static과 같다.

  <!DOCTYPE html>
<html lang="en">
<head>
</head>
        <style>
            .parent{
                    border:1px solid black;
                    display: inline-block;
                    width:200px;
                    height:200px;
                    position:relative; //or position:static
                }
                .child{
                    width:100px;
                    height:100px;
                    background-color: red;
                    position:relative;
                    left:30px;
                    top:30px;
                }
        </style>
<body>
    <div class='parent'></div>
    <div class='parent'>
        <div class='child'></div>
    </div>

</body>    
</html>


2) 부모태그가 absolute일 경우

  <!DOCTYPE html>
<html lang="en">
<head>
</head>
        <style>
            .parent{
                    border:1px solid black;
                    display: inline-block;
                    width:200px;
                    height:200px;
                    position:absolute;
                }
                .child{
                    width:100px;
                    height:100px;
                    background-color: red;
                    position:relative;
                    left:30px;
                    top:30px;
                }
        </style>
<body>
    <div class='parent'></div>
    <div class='parent'>
        <div class='child'></div>
    </div>

</body>    
</html>

부모태그가 absolute라 부모태그에서 offsetParent를 찾아가면서 body태그에 도달하고 해당 위치를 기준으로 left top 30px이 적용


3. 자식태그가 position:absolute일때

1) 부모태그가 position: static일때

  <!DOCTYPE html>
<html lang="en">
<head>
</head>
        <style>
            .parent{
                    border:1px solid black;
                    display: inline-block;
                    width:200px;
                    height:200px;
                    position:static;
                }
                .child{
                    width:100px;
                    height:100px;
                    background-color: red;
                    position:absolute;
                    left:30px;
                    top:30px;
                }
        </style>
<body>
    <div class='parent'></div>
    <div class='parent'>
        <div class='child'></div>
    </div>

</body>    
</html>

부모태그가 static이므로 offsetParent를 더 찾다가 body태그이므로 body태그를 기준으로 left top 30px이 적용된다.


2) 부모태그가 position: relative일때

  <!DOCTYPE html>
<html lang="en">
<head>
</head>
        <style>
            .parent{
                    border:1px solid black;
                    display: inline-block;
                    width:200px;
                    height:200px;
                    position:relative;
                }
                .child{
                    width:100px;
                    height:100px;
                    background-color: red;
                    position:absolute;
                    left:30px;
                    top:30px;
                }
        </style>
<body>
    <div class='parent'></div>
    <div class='parent'>
        <div class='child'></div>
    </div>

</body>    
</html>

offsetParent를 찾다가 부모태그가 relative이므로 부모태그를 기준으로 left top 30px이 적용된다.


3) 부모태그가 position: absolute일때

  <!DOCTYPE html>
<html lang="en">
<head>
</head>
        <style>
            .parent{
                    border:1px solid black;
                    display: inline-block;
                    width:200px;
                    height:200px;
                    position:absolute;
                }
                .child{
                    width:100px;
                    height:100px;
                    background-color: red;
                    position:absolute;
                    left:30px;
                    top:30px;
                }
        </style>
<body>
    <div class='parent'></div>
    <div class='parent'>
        <div class='child'></div>
    </div>

</body>    
</html>

자식 입장에서 부모가 absolute이므로 offsetParent를 찾았지만 부모는 다시 absolute이므로 offsetParent를 찾아 body까지가서 거기서 left top 30px를 적용시킨다.


개인적정리

  • relative => 부모 확인해서 관련 top left right bottom 값 처리
  • absolute => 부모를 계속확인해서 offsetParent가 되는 것을 찾아 top left right bottm을 처리 (recursive)

총정리 코드

1) static

<!DOCTYPE html>
<html lang="en">
<head>
</head>
        <style>
            .grandparent{
                position:static;
                width:400px;
                height:400px;
                background:green;
                top:20px;
                left:30px;
            }

            .parent{
                    display: inline-block;
                    width:200px;
                    height:200px;
                    left:30px;
                    top:300px;
                    background-color:blue;
                    position:absolute; //or position:static
                }
                .child{
                    width:100px;
                    height:100px;
                    background-color: red;
                    position:relative;
                    left:30px;
                    top:30px;
                }
        </style>
<body>
    <div class='grandparent'>
    <div class='parent'>
        <div class='child'></div>
    </div>
</div>

</body>    
</html>

grandparent가 static이므로 해당 내용의 top left는 적용되지않고 parent의 absolute는 부모가 static이므로 그다음 부모인 body에서부터 적용된다.

relative

<!DOCTYPE html>
<html lang="en">
<head>
</head>
        <style>
            .grandparent{
                position:relative;
                width:400px;
                height:400px;
                background:green;
                top:20px;
                left:30px;
            }

            .parent{
                    display: inline-block;
                    width:200px;
                    height:200px;
                    left:30px;
                    top:300px;
                    background-color:blue;
                    position:absolute; //or position:static
                }
                .child{
                    width:100px;
                    height:100px;
                    background-color: red;
                    position:relative;
                    left:30px;
                    top:30px;
                }
        </style>
<body>
    <div class='grandparent'>
    <div class='parent'>
        <div class='child'></div>
    </div>
</div>

</body>    
</html>

grandparent가 relative이므로 해당 내용의 top left는 적용되고 적용된 parent의 absolute는 부모가 reltaive이므로 해당 부모를 기준으로 적용된다.

따라서 위와 서로간의 거리차는 없지만 body태그와의 떨어지냐 아니냐를 확인 할 수 있다.

profile
나의 하루를 가능한 기억하고 즐기고 후회하지말자

0개의 댓글