The content on the page is currently being displayed above an absolute dropdown menu that offers more options in relation to the sticky breadcrumb navigation.
I have attempted to adjust the z-index and positioning, but the only solution I discovered was to remove the relative positioning from the content, which is not ideal.
Is there a way to place 'div2' above 'div1'?
EDIT: https://jsfiddle.net/6ncp7f1q/1/
HTML
<div class="container">
<div class="breadcrumb">
Home
<div class="extra">
<a href="#">TextText</a>
<a href="#">TextText</a>
</div>
</div>
<div class="content">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
CSS
.container{
display: flex;
flex-direction: column;
}
.breadcrumb{
position: relative;
height: 40px;
width: 100%;
background-color: pink;
}
.extra{
position: absolute;
background-color: red;
right: 0;
top: 40px;
}
.extra a {
display: block;
width: 100%;
}
.content{
position: relative;
width: 100%;
color: green;
}