πŸ“ŒLanguage/HTML & CSS

z-index, μŒ“μž„ μˆœμ„œ, 툴팁 λ°•μŠ€ (tool tip)

hellohailie 2022. 4. 19. 23:12
λ°˜μ‘ν˜•

μš”μ†Œμ˜ μœ„μΉ˜λ₯Ό μ§€μ •ν•˜λ‹€ 보면 λΆ€λ“μ΄ν•˜κ²Œ 두 μš”μ†Œκ°€ κ²Ήμ³μ§€κ²Œ λ˜λŠ” κ²½μš°κ°€ μžˆμŠ΅λ‹ˆλ‹€.

μ΄λ•Œ μ–΄λŠ μš”μ†Œκ°€ 더 μœ„λ‘œ μ˜¬λΌμ™€μ•Ό ν•˜λŠ”μ§€λŠ” μš”μ†Œλ“€μ˜ μŒ“μž„ μˆœμ„œμ˜ κ·œμΉ™μ— 따라 μœ„μΉ˜ν•˜κ²Œ λ©λ‹ˆλ‹€.

이것을 μ •ν•˜λŠ” 것이 λ°”λ‘œ z-index의 μ—­ν• μž…λ‹ˆλ‹€.

μŒ“μž„ μˆœμ„œλŠ” z-index 속성 값을 μ„€μ •ν•˜μ—¬ λ°”κΏ€ 수 μžˆλ‹€. 

 

z-index 속성

κΈ°λ³Έ κ°’ : auto

μš”μ†Œκ°€ κ²ΉμΉ˜λŠ” μˆœμ„œ(μŒ“μž„ μˆœμ„œ λ˜λŠ” stack order)λ₯Ό μ§€μ •ν•˜λŠ” μ†μ„±μž…λ‹ˆλ‹€.

z-index: auto | number | initial | inherit;

< μ†μ„± κ°’ >

auto μŒ“μž„ μˆœμ„œλ₯Ό λΆ€λͺ¨μ™€ λ™μΌν•˜κ²Œ μ„€μ •(κΈ°λ³Έκ°’)
number ν•΄λ‹Ή 수치둜 μŒ“μž„ μˆœμ„œλ₯Ό μ„€μ •(음수 ν—ˆμš©) /zμΆ•μ˜ μˆœμ„œλ₯Ό 지정/ 
z-index: 1;​

 

  • position 값이 static이 μ•„λ‹Œ 경우 지정가λŠ₯
  • μˆœμ„œ 값이 없을 경우 μƒμ„±μˆœμ„œ(μ½”λ“œμƒ μˆœμ„œ)에 따라 μŒ“μž„
  • λΆ€λͺ¨κ°€ z-index 값이 μžˆμ„ 경우 λΆ€λͺ¨ μ•ˆμ—μ„œλ§Œ 의미있음
  • 큰 값이 κ°€μž₯ μœ„μͺ½(λ‚΄ μͺ½μœΌλ‘œ μ˜¬λΌμ˜¨λ‹€.)
  • 음수 μ‚¬μš© κ°€λŠ₯

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>z-index</title>
  <style>
    .parent {
      z-index: 10;
      position: relative;
      width: 300px;
      height: 50px;
      border: 2px solid #000;
      background-color: #ccc;
    }

    .child {
      z-index: 10;
      position: absolute;
      top: 10px;
      right: 10px;
      width: 100px;
      height: 100px;
      background-color: pink;
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <div class="wrap">

    <h1 class="practive_title">z-index 속성</h1>
    <div class="z_area">
      <div class="parent" style="z-index:11">
        position: relative;
        <div class="child" style="right:20px;z-index:1000;">
          position: absolute;
        </div>
      </div>
      <div class="parent" style="">
        position: relative;
        <div class="child">
          position: absolute;
        </div>
      </div>
    </div>
</div>
</body>
</html>

 

 

 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

 

πŸ‘‡λ‹€λ₯Έ μ˜ˆμ œπŸ‘‡

https://codepen.io/yongwon/pen/dXwyQq

 

z-index (stacking context)

...

codepen.io

 

 

λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ λ³€κ²½κΈˆμ§€

'πŸ“ŒLanguage > HTML & CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

미디어쿼리와 λ°˜μ‘ν˜• μ›Ή  (0) 2022.04.20
HTML/CSS μœ νš¨μ„± 검사 μ‚¬μ΄νŠΈ  (0) 2022.04.19
css position & offset / static, relative, absolute, fixed / css 곡뢀할 λ•Œ 보면 쒋은 μ‚¬μ΄νŠΈ  (0) 2022.04.19
css display floatκ³Ό clear  (0) 2022.04.19
css visibility 속성  (0) 2022.04.19

'πŸ“ŒLanguage/HTML & CSS'의 λ‹€λ₯ΈκΈ€

  • ν˜„μž¬κΈ€z-index, μŒ“μž„ μˆœμ„œ, 툴팁 λ°•μŠ€ (tool tip)

κ΄€λ ¨κΈ€

λŒ“κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”