Dropdown button hover
<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>
<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>
조상 요소 위치를 기준으로 위쪽(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;
}