I'm trying to get my dropdown menu to stay above iframe elements on a page. I know this question is asked often, but my issue is that my iframe goes out of whack when I set the position to relative rather than absolute, so (as far as I can tell) I can't use z-index. I know my code is pretty messy, I'm essentially just trying to keep the video in the center of the page at the same proportions while also maintaining responsiveness, and then keep the dropdown above the video.
Here's my CSS
.dropbtn {
background-color: inherit;
font-family: 'Inconsolata', monospace;
color: red;
font-size: 18px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
min-width: 50px;
background-color: white;
padding: 10px;
}
.dropdown-content a {
text-decoration: none;
display: block;
margin-top: 10px;
}
.dropdown-content a:hover {
color: black;
text-shadow: 1px 1px rgba(256, 0, 0, .4);
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: white;}
Here's the HTML
<style>
#vidframe {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
#vid {
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 60%;
margin-left: 20%;
border: 0;
}
</style>
<body>
<div id="vidframe">
<iframe id="vid" src="https://www.youtube.com/embed/zb_m_ZomwHA" frameborder="0"></iframe>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire