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 수업 - 포지션 3 : fixed 본문

CSS

CSS 수업 - 포지션 3 : fixed

목표는 커리 2021. 3. 16. 08:06
728x90
SMALL
<html>
    <head>
        <style>
            #parent, #other{
                border:5px solid tomato;
            }
            #large {
                height:10000px;
                background-color:tomato;
            }
            #me{
                background-color:blakk;
                color:white;
                position: fixed;
                left:0px;
                top:0px;
            }
        </style>
    </head>
    <body>
        <div id='other'>
            other
        </div>
        <div id='parent'>
            parent
            <div id='me'>
                me
            </div>
        </div>
        <div id='large'>
            large
        </div>
    </body>
</html>
  • 부모 값중 위치가 정해지지 않은 것들중에 absolute가 적용된다.

css19

  • 스크롤을 내려도 me는 고정되어있다.

  • 특정한 요소를 고정시키고 싶으면 fixed를 사용한다.

#me{
                background-color:blakk;
                color:white;
                position: fixed;
                left:0px;
                bottom:0px;
                width:100%;
                text-align:center;
            }

css20

  • me가 맽밑에 고정된다.
  • fixed도 absolute랑 비슷하다.
  • 부모 크기도 자식과 연결이 끊겼기 때문에 자식의 크기를 포함하지 않는다.
  • 자식은 부모와 연결이 끊겨서 본인 크기만 가져간다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

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