Gặp lỗi khi làm dropdown menu nằm ngang

[japananh (Trần Nhật Anh)]

Chào mọi người mình làm dropdown menu và gặp lỗi khi menu xổ xuống thì bị một ảnh của một component trong boby che mất như hình ở dưới. Mình đã thử theo 2 cách là dùng background-image và trong html nhưng vẫn chưa fix được lỗi này. Ai chỉ giúp mình lỗi ở đâu và cách sửa với. Mình cảm ơn. Tất cả code html và css của mình ở đây.`

Còn đây là đoạn code component có ảnh che mất dropdown menu

 <!-- For You -->
 <div id="for-you">
     <a href="#" class="for-you-inner">
        <div class="playlist-square">
        	<a href="#" title="Playlist của bạn">
        		<img src="https://picsum.photos/90/90" />
        		<div class="overlay">
        			<i class="far fa-play-circle fa-4x"></i>
        		</div>
        	</a>
        </div>			
        <div class="content">
        	<p style="font-size: 15px;" class="text-capitalize"><a href="#"><b>Dành riêng cho bạn</b></a></p>
        	<p style="font-size: 13px;"><a href="#">Nghe những ca khúc yêu thích và khám phá âm nhạc dành riêng cho bạn.</a></p>
        </div>
     </a>				
    </div>

#for-you {
	width: 300px;
	height: 120px;
	background: url("https://picsum.photos/300/110");
	margin-bottom: 20px;
}

#for-you a {
	text-decoration: none;
	color: #FFF;
}

#for-you-inner {
	height: 100%;
	width: 100%;
}

#for-you .playlist-square {
	position: relative;
	width: 90px;
	height: 90px; 
	float: left;
	margin: 15px;
}

#for-you .playlist-square .overlay {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

}

#for-you .playlist-square:hover .overlay {
	background-color: rgba(0,0,0,0.5);
}

#for-you .playlist-square .overlay i {
	color: #FFF;
}

#for-you .content {
	padding: 15px;
	margin-left: 90px;
}

#for-you .content p {
	margin: 0;
}

[anon12276517]

Thêm dòng này vào nhé:

.has-submenu{
  z-index: 100;
}

---

https://www.w3schools.com/cssref/pr_pos_z-index.asp

[japananh (Trần Nhật Anh)]

z-index: 100;

Cảm ơn bạn đọc dòng này là hiểu luôn ra vấn đề rồi.

An element with greater stack order is always in front of an element with a lower stack order.
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).