wiki:css:css_note:css_position
문서의 이전 판입니다!
목차
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 속성을 설정하면 해당 요소가 정상적인 위치에서 멀리 조정됩니다.
해당 요소에 의해 남겨진 어떠한 남는 공간에도 다른 콘텐츠가 맞게 조정되지 않습니다.
예제
<code html>
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_position.1615537878.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
