static position

====== CSS Position ====== * description : CSS Layout - The position property * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-12 \\ \\ =====Source of the article==== * [[https://www.w3schools.com/css/css_positioning.asp|CSS Layout - The position Property]] \\ \\ ======CSS Layout - The position property====== ''position''속성은 하나의 요소에 대하여 사용되는 포지셔닝 방법의 타입을 지정합니다(static, relative, fixed, absolute or sticky).\\ \\ =====The position Property===== ''position''속성은 하나의 요소에 대하여 사용되는 포지셔닝 방법의 타입을 지정합니다.\\ \\ 5개의 다른 포지션 값이 있습니다.:\\ * ''static'' * ''relative'' * ''fixed'' * ''absolute'' * ''sticky'' top, bottom, left, right 속성을 사용하여 요소들을 위치시킵니다.\\ 하지만 이런 속성들은 ''position''속성들이 먼저 설정되지 않는 경우에는 적용되지 않습니다.\\ 또한 이 속성들은 위치 값(position value)에 따라서 작용합니다.\\ \\ =====position:static;===== HTML 요소들은 기본값으로 static 속성을 가집니다.\\ static 위치 요소들은 top, bottom, left, right 속성들에 영향을 받지 않습니다.\\ ''position: static;''속성을 가진 요소는 특별하게 위치하지 않고, 웹페이지의 일반적인 흐름에 따라서 위치합니다.\\ \\ ====예제====






    
    
    
    static position





    position: static;

    An element with position: static; is not positioned in any special way; it is always positione according to the
        normal flow of the page:

    
        This div element has position: static;

\\ \\ =====position:relative;===== ''position: relative''속성을 가진 요소는 자신의 정상적인 위치에 상대적을 위치합니다.\\ \\ relative 속성을 가진 요소에 대해 top, right, bottom, left 속성을 설정하면 해당 요소가 정상적인 위치에서 멀리 조정됩니다.\\ 해당 요소에 의해 남겨진 어떠한 남는 공간에도 다른 콘텐츠가 맞게 조정되지 않습니다.\\ \\ ====예제====






    
    
    
    static position





    position: relative;

    An element with position: relative; is positioned relative to its normal position:

    
        This div element has position: relative;

\\ \\ =====position: fixed;===== ''position: fixed''속성을 가진 요소는 뷰포트(viewport)에 상대적으로 배치됩니다.\\ 이것은 웹페이지가 스크롤되어도 항상 같은 자리에 고정되어 있다는 것을 의미합니다.\\ top, right, bottom, left속성을 사용하여 요소를 배치합니다.\\ \\ 고정 요소는 일반적으로 위치하는 웹페이지에 공백을 남기지 않습니다.\\ \\ 웹페이지의 오른쪽 하단 모서리에 고정된 요소를 하기의 예제에서 확인하세요.\\ ====예제====






    
    
    
    position: fixed;
    




    position: fixed;
    
        An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same
        place even if the page is scrolled.
    

    
        This div element has position: fixed;

\\ \\ =====position: absolute;===== ''position: absolute;''속성을 가진 요소는 fixed와 같이 뷰포트에 상대적으로 배치된 대신에 가장 가까이 위치한 조상에 상대적으로 배치됩니다.\\ \\ 허자만 absolute 속성의 위치 요소가 배치된 조상을 가지고 있지 않는 경우, 문서 본문(documnt body)를 사용하고 페이지 스크롤과 함께 이동합니다.\\ **Note: 위치 지정 요소는 위치가 static을 제외한 요소입니다.**\\ \\ ====예제====






    
    
    
    position: absoulte;
    




    position: absolute;

    
        An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of
        positioned rlative to the viewport, like fixed):
    

    
        This div element has position: relative;
        
            This div element has position: absolute;

\\ \\ =====position: sticky;===== ''position: sticky;''속성을 가진 요소는 사용자의 스크롤 위치에 기반하여 배치됩니다.\\ \\ sticky 요소는 스크롤 위치에 따라 ''relative'' 그리고 ''fixed''사이에서 전환됩니다.\\ 뷰포트에서 주어진 오프셋 위치에 도달할 때 까지 sticky 요소는 상대적으로 배치됩니다. \\ 그런 다음 자리에 고정됩니다.(position:fixed처럼)\\ \\ **Note: 인터넷 익스플로러는 sticky 포지셔닝을 지원하지 않습니다. 사파리는 -webkit- prefix가 필요합니다. sticky 포지셔닝이 작동하도록 초최소한 ''top'', ''right'', ''bottom'' 또는''left'' 들 중 하나는 지정을 해야 합니다.**\\ 하기의 예제에서 스크롤 위치에 도달하면 sticky 요소는 웹페이지의 상단에 고정됩니다.(''top: 0'')\\ ====예제====






    
    
    
    position: sticky;
    




    Try to scroll inside this frame to understand how sticky positioning works.

    I am sticky

    
        
            In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll
            position.
        
        Scroll back up to remove the stickyness.
        
            Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
            concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
            Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
        
        
            Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
            concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
            Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

\\ \\ =====Overlapping Elements===== 요소들이 배치될 때, 다른 요소에 겹칠 수 있습니다.\\ ''z-indes''속성은 요소의 스택 순서를 지정합니다.(요소는 다른 요소들의 앞 또는 뒤에 배치되어야 합니다)\\ \\ 하나의 요소는 양수 또는 음수 스택 순서를 가질 수 있습니다.\\






    
    
    
    Overlapping Elemnts
    



    This is a heading
    
    Because the image has a z-index of -1, it will be placed behind the text.

\\ 스택 순서가 더 큰 요소는 항상 스택 순서가 낮은 요소 앞에 있습니다.\\ \\ **Note: 지정된 ''z-index''없이 두 개의 배치 요소가 겹치는 경우, HTML 코드에서 마지막에 배치된 요소가 맨 위에 표시됩니다.** \\ \\ =====Positioning Text In an Image===== 이미지 위에 텍스트를 배치하는 방법\\ \\ ====예제====






    
    
    
    Text over Image
    




    Image Text
    Add some text to an image in the top left corner:

    
        
        Top Left
        Top Right
        Centered
        Bottom Left
        Bottom Right