250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

커리까지

CSS 수업 - 포지션 2 : absolute 본문

CSS

CSS 수업 - 포지션 2 : absolute

목표는 커리 2021. 3. 15. 08:29
728x90
SMALL
<html>
    <head>
        <style>
            #parent, #other{
                border:5px solid tomato;
            }
            #me{
                background-color:blakk;
                color:white;
                position: absolute;
                left:0px;
                top:0px;
            }
        </style>
    </head>
    <body>
        <div id='other'>
            other
        </div>
        <div id='parent'>
            parent
            <div id='me'>
                me
            </div>
        </div>
    </body>
</html>

css16

 #me{
                background-color:blakk;
                color:white;
                position: relative;
                left:0px;
                top:0px;
            }

css15

  • relateive를 하면 부모를 기준으로 만들어지고 absolute를 하면 부모 기준 상관없이 html 기준으로 시작된다.
 #me{
                background-color:blakk;
                color:white;
                position: absolute;
            }
  • 포지션 값이 없으면 부모를 기준으로 시작한다.

css17

  • 기본값은 원래 있어야 할 곳에 있는 곳이 기본값이다.

  • 크기를 키우고 싶으면 width:200px;를 추가한다.

<html>
    <head>
        <style>
            #parent, #other{
                border:5px solid tomato;
            }
            #parent{
                position:relative;
            }
            #me{
                background-color:blakk;
                color:white;
                position: absolute;
                left:0px;
                top:0px;
            }
        </style>
    </head>
    <body>
        <div id='other'>
            other
        </div>
        <div id='parent'>
            parent
            <div id='me'>
                me
            </div>
        </div>
    </body>
</html>

css18

  • ststic가 아닌 부모가 나타날때까지 지나가다가 static가 아닌게 나오면 거기서부터 시작한다.
  • 부무와의 관계가 끊기기 때문에 본인의 크기로 지정된다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

CSS 수업 - flex 1 : intro  (0) 2021.03.17
CSS 수업 - 포지션 3 : fixed  (0) 2021.03.16
CSS 수업 - 포지션 1 : relative VS static  (0) 2021.03.12
CSS 수업 - 마진 겹침 3  (0) 2021.03.11
CSS 수업 - 마진 겹침 2  (0) 2021.03.10
'CSS' Related Articles more
Comments