포지셔닝 관련 CSS - visibility / z-index

포지셔닝 관련 CSS - visibility / z-index

• visibility 속성은 특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성입니다.
• 기본형 : visibility : visible / hidden / collapse

속성 값	설명
visible	화면에 요소를 표시합니다. (기본 값)
hidden	화면에서 요소를 감춥니다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미칩니다.
collapse	표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절합니다. 그 외의 영역에서 사용하면 'hidden'처럼 처리합니다.

아무것도 지정하지 않았을 경우

2번째 이미지에 visibility : hidden을 지정했을 경우(화면에서 사라지지만 영역을 그대로 차지한다)

<style>
    .exam1, .exam2 {width: 600px; height: 200px; border: 2px solid; margin-bottom: 30px;}
    .exam1 img, .exam2 img {margin: 15px;}
    .exam2 img:nth-child(2) {visibility: hidden;}
</style>     

포지셔닝 관련 CSS - z-index

• z-index 속성은 요소 위에 요소를 쌓을 때 쌓는 순서를 지정하기 위해 사용합니다.
• 기본형 : z-index : < 숫자 >
• z-index 값이 적을 수록 아래에 쌓이고 z-index 값이 클수록 z-index 값이 작은 요소보다 위에 쌓입니다.
• z-index 값을 명시하지 않을 경우, 웹 문서에 맨 먼저 삽입하는 요소가 z-index : 1 값을 가지며 그 후 삽입하는 요소들은 z-index값이 점점 커집니다. 따라서 문서에 넣은 순서대로 쌓이게 됩니다.
• 웹 페이지에 있는 다른 요소들과 겹쳐 표시할 때 무조건 맨 앞에 표시해야 한다면 z-index : 999나 z-index:1000처럼 매우 큰 값을 사용하기도 합니다.

z-index 를 지정하지 않을 경우(차례대로 쌓인다)

2번째 box에 z-index:3을 준 경우(가장 위로 보인다)

<style>
    .exam3, .exam4 {width: 300px; height: 250px; border: 2px solid; position: relative; margin-bottom: 30px;}   
    .box1 {float: left; margin: 50px; width: 100px; height: 100px; background: pink; }
    .box2 {float: left; position: absolute; left: 80px; top: 80px; width: 100px; height: 100px; background: powderblue; }
    .box3 {float: left; position: absolute; left: 120px; top: 120px; width: 100px; height: 100px; background: yellow; }
    .exam4 .box2 {z-index: 3;}
</style>     

 

 

 

 

참고 : HTML5 + CSS3 웹 표준의 정석