웹프로그래밍/css

CSS - Position의 이해

zelkova 2017. 2. 12. 11:41

<목차로 돌아가기>


position의 이해


포지션은 태그의 스타일을 지정하여 태그의 위치를 조절할 수 있습니다.

정적(기본), 상대적, 화면 기준, 위치지정



CSS는 4가지의 위치 설정 방법이 존재한다.

정적(static) 위치 설정 : 정상적인 흐름에 따른 배치이다.

상대(relative) 위치 설정 : 정상적인 위치가 기준점이된다.

절대(absolute) 위치 설정 : 컨테이너의 원점이 기준이된다.

고정(fixed) 위치 설정 : 위도우의 원점이 기준이 된다.




static

HTML 정적인 배치 된 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을받지 않습니다.


위치가 정적 인 요소. 어떤 특별한 방법으로도 배치되지 않았습니다. 페이지의 정상적인 흐름에 따라 항상 배치됩니다.


이 <div> 요소의 위치는 static입니다.

다음은 사용 된 CSS입니다.

  1. <html>
  2. <head>
  3. <style>
  4. div.static 
  5. {
  6.     position: static;
  7.     border: 2px solid #00aa22;
  8. }
  9. </style>
  10. </head>
  11. <body>

  13. <h2>position: static;</h2>

  15. <p>다른 방법으로 건들 수 없음, 페이지의 정상적인 흐름에 따라서 배치</p>

  17. <div class="static">
  18. 요 속성은 static 임둥;
  19. </div>

  21. </body>
  22. </html>



relative

그 정상 위치에 상대적으로 위치합니다.


상대적으로 배치 된 요소의 top, bottom, left, right 속성을 설정하면 해당 요소가 정상 위치에서 벗어나 조정됩니다. 다른 콘텐츠는 요소가 남긴 틈에 맞춰 조정되지 않습니다.



상대적으로 배치 된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 해당 요소가 정상 위치에서 벗어나 조정됩니다. 


  1. <html>
  2. <head>
  3. <style>
  4.     div {
  5.         position: relative;
  6.         border: 3px solid #73AD21;
  7.     }
  8.     div.center{
  9.         width:400px;
  10.         height:200px;
  11.     }
  12.     div.left{
  13.         left: 50px;
  14.     }
  15.     div.right{
  16.         right: 50px;
  17.     }
  18.     div.top{
  19.         top: 50px;
  20.     }
  21.     div.bottom{
  22.         bottom: 20px;
  23.     }
  24. </style>
  25. </head>
  26. <body>
  27.     <h2>position: relative;</h2>
  28.     <center>
  29.     <div class="center">
  30.         <div class="left">
  31.              relative : left
  32.         </div>
  33.         <div class="right">
  34.             relative : right
  35.         </div>
  36.         <div class="top">
  37.             relative : top
  38.         </div>
  39.         <div class="bottom">
  40.             relative : bottom
  41.         </div>
  42.     </div>
  43.     </center>
  44. </body>
  45. </html>



fixed

둥둥떠다니는 플로팅배너를 만들때 사용되는 속성입니다.


보이는 화면(뷰 포트)을 기준으로 배치되므로 페이지가 스크롤 되어도 항상 같은 위치에 유지됩니다.


위쪽, 오른쪽, 아래쪽 및 왼쪽 속성은 요소의 위치를 ​​지정하는 데 사용됩니다.






absolute

고정 된 것처럼 뷰포트를 기준으로 배치되는 대신) 가장 가까운 위치에있는 조상과 관련하여 배치됩니다.



  1. <html>
  2. <head>
  3. <style>
  4. div.relative {
  5.     position: relative;
  6.     width: 400px;
  7.     height: 200px;
  8.     border: 3px solid #73AD21;
  9. } 

  11. div.absolute {
  12.     position: absolute;
  13.     top: 80px;
  14.     right: 0;
  15.     width: 200px;
  16.     height: 100px;
  17.     border: 3px solid #73AD21;
  18. }
  19. </style>
  20. </head>
  21. <body>

  23. <h2>position: absolute;</h2>

  25. <div class="relative">This div element has position: relative;
  26.   <div class="absolute">This div element has position: absolute;</div>
  27. </div>

  29. </body>
  30. </html>








반응형
저작자표시 비영리 변경금지

'웹프로그래밍 > css' 카테고리의 다른 글

CSS DOM(Document Object Model) 개념잡기  (0) 2017.02.17
Webkit이란?  (0) 2017.02.16
CSS - display, visivility 보이기, 숨기기, 인라인, 블럭  (0) 2017.02.11
CSS3 애니메이션  (0) 2016.03.04
CSS 효과 및 필터  (0) 2016.03.04

'웹프로그래밍/css'의 다른글

  • 현재글CSS - Position의 이해

관련글

티스토리툴바