잡동사니에도 사랑을

[21.09.17] exam09(05_cssPositioning) - 이미지 겹쳐서 배치(z-index 활용) 본문

JAVA_EE/CSS

[21.09.17] exam09(05_cssPositioning) - 이미지 겹쳐서 배치(z-index 활용)

luvforjunk 2021. 9. 17. 19:05
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

div {

        position: absolute;

}

img {

        position: absolute; 항상 부모를 기준으로

}

#spadeA {

        z-index: 20px;

        left: 10px; top: 20px;

}

#spade2 {

        z-index: 0px;

        left: 40px; top: 30px;

}

#spade7 {

        z-index: 10px;

        left: 150px; top: 60px;

}

#spade3 {

        z-index: 15px;

        left: 90px; top: 5spa0px;

}

</style>

</head>

<body>

        <img id="spadeA" src="../img/spade-A.png" width="100" height="140" alt="스페이드A">

        <img id="spade2" src="../img/spade-2.png" width="100" height="140" alt="스페이드2">

        <img id="spade7" src="../img/spade-7.png" width="100" height="140" alt="스페이드7">

        <img id="spade3" src="../img/spade-3.png" width="100" height="140" alt="스페이드3">

</body>

</html>

 

<!--

z-index

: z-index는 요소들을 다른 레이어 위에 겹칠 수 있게 하는 css 속성이다

: z-index가 설정되지 않아도 stacking order에 의해 요소들의 위치가 결정된다

  stacking order는 외관의 순서에 따라 결정된다

  기본은 z-index 값이 none (z-index: 0;) 이다.

: element의 위치를 설정하려면 static이 아닌 relative, absolute와 같은 값을 CSS의 position 속성을 추가한다 

 -->

 

결과창

728x90
반응형

'JAVA_EE > CSS' 카테고리의 다른 글

[21.09.17] exam11(05_cssPositioning) - 박스 안 내용 확인(hidden, visible, scroll, auto 활용)  (0) 2021.09.17
[21.09.17] exam10(05_cssPositioning) - 숨겨져 있는 단어 마우스 올려 보이게 하기(<span> 태그 두 번)  (0) 2021.09.17
[21.09.17] exam08(05_cssPositioning) - 화면을 기준(fixed)으로 자리 배치  (0) 2021.09.17
[21.09.17] exam07(05_cssPositioning) - 각기 다른 위치에 글씨 넣기(display, position, border 설정)  (0) 2021.09.17
[21.09.17] exam06(05_cssPositioning) - 상대 배치  (0) 2021.09.17
'JAVA_EE/CSS' Related Articles more