WEB(웹)

(css) position

SharingWorld 2018. 5. 27. 22:36

배치 방법 지정하기


웹 문서 안의 요소들을 자유자재로 배치해 주는 속성


텍스트나 이미지를 나란히 배치, 

여러개의 요소를 가로나 세로로 원하는 위치에 배치 가능



position : static | relative | absolute | fixed


 속성 값

설명 

 static

요소를 문서의 흐름에 맞추어 배치합니다. 

float 속성으로만 이용해 좌우로 배치할 수 있음

 relative

이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있음 


.box1{
   float:left;
   width:100px;
   background:#ffd800;
   margin-right:10px;
   padding:20px;
}
.box2 {
   position:relative;
   left:-50px;
   top:30px;
   width:300px;
   background:#0094ff;
   float:left;
   padding:20px;
}

 absolute

원하는 위치를 지정해 배치함 

반드시 부모 요소가 relative로 지정되어야 함


<style>
      #wrap{
         position:relative;
         width:300px;
         height:300px;
         border:1px solid #ccc;
      }
      .box{
         position:absolute;
         width:50px;
         height:50px;
         background:#0094ff;
      }
      #crd1 {
         top:0;
         left:0;
      }
      #crd2{
         top:0;
         right:0;
      }
      #crd3{
         bottom:0;
         left:0;
      }
      #crd4{
         bottom:0;
         right:0;
      }
      #crd5{
         top:100px;
         left:100px;
      }
   </style>

<body>
   <div id="wrap">
      <div class="box" id="crd1"></div>
      <div class="box" id="crd2"></div>
      <div class="box" id="crd3"></div>
      <div class="box" id="crd4"></div>
      <div class="box" id="crd5"></div>
   </div>
</body>

 fixed

지정한 위치에 고정해 배치함. 화면에서 요소가 잘릴 수 있음. 

브라우저 창 기준(왼쪽 위가 원점) 스크롤 하더라도 계속 고정되어 표시


#fx{
   position:fixed;
   top:5px;
   right:5px;
   width:50px;
   height:50px;
   background:#ff6a00;
}







출처 : Doit! html5 + css3 웹표준의 정석