CSS 11. 레이아웃 관련 스타일 (2)

배치 관련 스타일

 

position : 상대위치 (relative)와 절대위치(absolute)
 >> 부모 요소에 position:relative 로 세팅, 이동하고자하는 요소에 position:absolute top: 거리(px) left:거리(px)로 설정 

<div class="outer">
        <div class="positioning" id="first">첫번째자식</div>
        <div class="positioning" id="second">두번째자식</div>
        <div class="positioning" id="third">세번째자식</div>
 </div>
  <style>
        .positioning{
            border:1px solid black;
        }
        #first{
            width:300px;
            height:300px;
            background:gold;
        }        
        #second{
            width:200px;
            height:200px;
            background: darkgreen;
            position: absolute;
            top:50px;
            left:50px;
            /*position: relative로 세팅된 부모요소로부터 위쪽으로 50px ,왼쪽으로 50px떨어진 자리에 위치*/ 
        }
        #third{
            width:100px;
            height:100px;
            background:rgb(209, 2, 2);
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .outer{
            position:relative;
        }
      </style>

첫번째자식

두번째자식

세번째자식

---

position : 고정위치 (fixed)

 <div class="positioning" id="fixed-area"></div>
<style>
#fixed-area{
            width: 100px;
            height:100px;
            background: red;
            position: fixed;
</style>

 

 

---

z-index : 요소들을 순서대로 위로 쌓는 속성 

<div class="outer"> <!--position:relative-->
        <div class="z-test" id="z1">요소1</div>
        <div class="z-test" id="z2">요소2</div>
        <div class="z-test" id="z3">요소3</div> 
 </div> 
 <style>
.outer{ position:relative;}
 .z-test{
            border: 1px solid black;
            width:150px;
            height: 100px;
            position: absolute;
        }
  #z1{
       background-color: gold;
       top:100px;
       left:100px;
       z-index: 10001;
        }

 #z2{
      background: green;
      top:50px;
      left:50px;
      z-index: 1000;
        }
#z3{
     background: red;
     z-index: 100000;
        }
</style>

요소1

요소2

요소3

 

 

 

---

visibility  : 특정요소를 보이거나 보이지 않게 하는 스타일

<div class="vis-test">첫번째영역</div>
<div class="vis-test"style="visibility: hidden">두번쨰영역</div>
<div class="vis-test">세번째영역</div>
<style>
.vis-test{
            border:1px solid black;
            width: 100px;
            height: 100px;
 }
 </style>

첫번째영역

두번쨰영역

세번째영역

---

float : 페이지 내의 요소들을 화면으로부터 띄워서 왼쪽 또는 오른쪽으로 배치하는 속성 

<div class="float-test">요소1</div>
        <div class="float-test">요소2</div>
        <div class="float-test">요소3</div>
        <div class="float-test">요소4</div>
        <div class="float-test">요소5</div>

        <br clear="both">
<style>
 .float-test{
            border:1px solid black;
            width: 100px;
            height: 30px;
            float:right;
    
        }
</style>

요소1

요소2

요소3

요소4

요소5