Sticky Tree

1 개요[ | ]

스티키 트리
html
Copy
<style>
  .tree-container {
    width: 300px;
    height: 100px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
  }
  .parent {
    font-weight: bold;
    background: #eee;
    padding: 5px;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .child {
    padding-left: 20px;
  }
</style>
<div class="tree-container">
  <div class="parent">📂 Parent 1</div>
  <div class="child">📄 Child 1-1</div>
  <div class="child">📄 Child 1-2</div>
  <div class="child">📄 Child 1-3</div>

  <div class="parent">📂 Parent 2</div>
  <div class="child">📄 Child 2-1</div>
  <div class="child">📄 Child 2-2</div>
  <div class="child">📄 Child 2-3</div>

  <div class="parent">📂 Parent 3</div>
  <div class="child">📄 Child 3-1</div>
  <div class="child">📄 Child 3-2</div>
  <div class="child">📄 Child 3-3</div>
</div>
2 같이 보기[ | ]
