Dropdown

이종희·2023년 8월 17일
1

Dropdown button hover


HTML

<h1>Dropdown</h1>

    <div class="container">
        <button class="dropdown-btn">Dropdown</button>
        <ul class="dropdown-content">
            <li>
                <a href="#">list item</a>
            </li>
            <li>
                <a href="#">list item</a>
            </li>
            <li>
                <a href="#">list item</a>
            </li>
        </ul>
    </div>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus qui 
        fugiat magni velit nobis eos deleniti odio quae accusamus voluptas, 
        tempora culpa odit deserunt consequatur aspernatur nesciunt. Saepe, sint quo.
    </p>

CSS

<style>
        .container {
            display: inline-block;
        }
        .dropdown-btn {
            background-color: rgb(54, 54, 54);
            color: white;
            font-weight: 600;
            padding: 0.5rem 0.75rem;
            border: none;
            font-size: 1rem;
        }
        .dropdown-content {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 200px;
            border: 1px solid #ddd;
            background-color: #fff;
            display: none;
            position: absolute;
        }
        a {
            display: block;
            padding: 0.5rem;
            color: #000;
        }
        a:hover {
            background-color: #eee;
        }
        .container:hover ul {
            display: block;
        }
    </style>

position absolute

부모 요소를 기준으로 배치

  • 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정

  • 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(body요소)를 기준으로 삼는다. (static을 제외한 값)

  • 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)

ex

// 부모인 안쪽 <div class="parent"> 을 기준으로 삼음
.parent {
    /* .. */
    /* .. */

    /*  parent(부모 요소)가 child(자식 요소)의 기준점이 됨 */
    position: relative;
}

/*  position : absolute */
.absolute {
    /* 부모 요소인 parent를 기준으로 위치가 결정된다. */
    position: absolute;
    bottom: 5px;
    right: 5px;
}

0개의 댓글