I recently encountered an issue after adding a logo to the bottom right corner of my website using an "img" tag. Strangely, this caused the embedded drop-down website to malfunction and prevent scrolling. Instead of being able to scroll, every attempt resulted in highlighting the newly added logo. The embedded drop down code I used is shown below.
Embedded Drop Down Code:
<div class="holder"><iframe class="iframe" src="mission statement.html"></iframe><div class="bar"></div>
</div>
CSS:.iframe {position: absolute; top: 300px;}
Interfering Logo Code:
<div class="holder"> <img class="img" src="Gary Logo Finial Size test (1).jpg"> <div class="bar"></div></div>
CSS:.holder{
width: 450px;
height:300px;
position:relative;}
.frame{
width: 100%;
height:100%;}
.bar{
position:absolute;
top:0;
left:0;
width:100%;
height:40px;}
.img {position: absolute; top: 500px; left: 1750px; height: 50%;}
The use of div tags was essential for ensuring that the images appear on top of my background. Thank you!