목차
CSS Position
- description : CSS Layout - The position property
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-12
Source of the article
CSS Layout - The position property
position속성은 하나의 요소에 대하여 사용되는 포지셔닝 방법의 타입을 지정합니다(static, relative, fixed, absolute or sticky).
The position Property
position속성은 하나의 요소에 대하여 사용되는 포지셔닝 방법의 타입을 지정합니다.
5개의 다른 포지션 값이 있습니다.:
staticrelativefixedabsolutesticky
top, bottom, left, right 속성을 사용하여 요소들을 위치시킵니다.
하지만 이런 속성들은 position속성들이 먼저 설정되지 않는 경우에는 적용되지 않습니다.
또한 이 속성들은 위치 값(position value)에 따라서 작용합니다.
position:static;
HTML 요소들은 기본값으로 static 속성을 가집니다.
static 위치 요소들은 top, bottom, left, right 속성들에 영향을 받지 않습니다.
position: static;속성을 가진 요소는 특별하게 위치하지 않고, 웹페이지의 일반적인 흐름에 따라서 위치합니다.
예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>static position</title> </head> <style> div.static { position: static; border: 3px solid #73ad21; } </style> <body> <h2>position: static;</h2> <p>An element with position: static; is not positioned in any special way; it is always positione according to the normal flow of the page:</p> <div class="static"> This div element has position: static; </div> </body> </html>
position:relative;
position: relative속성을 가진 요소는 자신의 정상적인 위치에 상대적을 위치합니다.
relative 속성을 가진 요소에 대해 top, right, bottom, left 속성을 설정하면 해당 요소가 정상적인 위치에서 멀리 조정됩니다.
해당 요소에 의해 남겨진 어떠한 남는 공간에도 다른 콘텐츠가 맞게 조정되지 않습니다.
예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>static position</title> </head> <style> div.relative { position: relative; left: 30px; border: 3px solid #73ad21; } </style> <body> <h2>position: relative;</h2> <p>An element with position: relative; is positioned relative to its normal position:</p> <div class="relative"> This div element has position: relative; </div> </body> </html>
position: fixed;
position: fixed속성을 가진 요소는 뷰포트(viewport)에 상대적으로 배치됩니다.
이것은 웹페이지가 스크롤되어도 항상 같은 자리에 고정되어 있다는 것을 의미합니다.
top, right, bottom, left속성을 사용하여 요소를 배치합니다.
고정 요소는 일반적으로 위치하는 웹페이지에 공백을 남기지 않습니다.
웹페이지의 오른쪽 하단 모서리에 고정된 요소를 하기의 예제에서 확인하세요.
예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position: fixed;</title> <style> div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73ad21; } </style> </head> <body> <h2>position: fixed;</h2> <p> 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. </p> <div class="fixed"> This div element has position: fixed; </div> </body> </html>
position: absolute;
position: absolute;속성을 가진 요소는 fixed와 같이 뷰포트에 상대적으로 배치된 대신에 가장 가까이 위치한 조상에 상대적으로 배치됩니다.
허자만 absolute 속성의 위치 요소가 배치된 조상을 가지고 있지 않는 경우, 문서 본문(documnt body)를 사용하고 페이지 스크롤과 함께 이동합니다.
Note: 위치 지정 요소는 위치가 static을 제외한 요소입니다.
예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position: absoulte;</title> <style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73ad21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid red; } </style> </head> <body> <h2>position: absolute;</h2> <p> An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned rlative to the viewport, like fixed): </p> <div class="relative"> This div element has position: relative; <div class="absolute"> This div element has position: absolute; </div> </div> </body> </html>
position: sticky;
position: sticky;속성을 가진 요소는 사용자의 스크롤 위치에 기반하여 배치됩니다.
sticky 요소는 스크롤 위치에 따라 relative 그리고 fixed사이에서 전환됩니다.
뷰포트에서 주어진 오프셋 위치에 도달할 때 까지 sticky 요소는 상대적으로 배치됩니다.
그런 다음 자리에 고정됩니다.(position:fixed처럼)
Note: 인터넷 익스플로러는 sticky 포지셔닝을 지원하지 않습니다. 사파리는 -webkit- prefix가 필요합니다. sticky 포지셔닝이 작동하도록 초최소한 top, right, bottom 또는left 들 중 하나는 지정을 해야 합니다.
하기의 예제에서 스크롤 위치에 도달하면 sticky 요소는 웹페이지의 상단에 고정됩니다.(top: 0)
예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position: sticky;</title> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: red; border: 2px solid darkblue; color: white; } </style> </head> <body> <p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p> <div class="sticky">I am sticky</div> <div style="padding-bottom:2000px"> <p> In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position. </p> <p>Scroll back up to remove the stickyness.</p> <p> 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. </p> <p> 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. </p> </div> </body> </html>
Overlapping Elements
요소들이 배치될 때, 다른 요소에 겹칠 수 있습니다.
z-indes속성은 요소의 스택 순서를 지정합니다.(요소는 다른 요소들의 앞 또는 뒤에 배치되어야 합니다)
하나의 요소는 양수 또는 음수 스택 순서를 가질 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Overlapping Elemnts</title> <style> img { position: absolute; left: 0; top: 0; z-index: -1; } </style> </head> <body> <h1>This is a heading</h1> <img src="w3css.gif" width="100" height="140"> <p>Because the image has a z-index of -1, it will be placed behind the text.</p> </body> </html>
스택 순서가 더 큰 요소는 항상 스택 순서가 낮은 요소 앞에 있습니다.
Note: 지정된 z-index없이 두 개의 배치 요소가 겹치는 경우, HTML 코드에서 마지막에 배치된 요소가 맨 위에 표시됩니다.
Positioning Text In an Image
이미지 위에 텍스트를 배치하는 방법
예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text over Image</title> <style> .container { position: relative; } .topleft { position: absolute; top: 8px; left: 16px; font-size: 30px; } .topright { position: absolute; top: 8px; right: 16px; font-size: 30px; } .centered { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 30px; } .bottomleft { position: absolute; bottom: 8px; left: 16px; font-size: 30px; } .bottomright { position: absolute; bottom: 8px; right: 16px; font-size: 30px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <h2>Image Text</h2> <p>Add some text to an image in the top left corner:</p> <div class="container"> <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300"> <div class="topright">Top Left</div> <div class="topleft">Top Right</div> <div class="centered">Centered</div> <div class="bottomleft">Bottom Left</div> <div class="bottomright">Bottom Right</div> </div> </body> </html>
