I can't put a section with background above Google Maps iframe-CodePudding

I've got an issue, while trying to create an overlay above google maps iframe. The background-color isn't aplying in CSS. Are there any restrictions from Google and what's a proper solution to this?

.ellenonmap {
    background-color:white!important;
    text-align: center;
    box-sizing: border-box;
    width: 400px;
    height: 400px;
    margin-top: -300px;
    margin-left: 100px;
}

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100621.22936695188!2d23.66829933952863!3d37.990816432734675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bd1f067043f1:0x2736354576668ddd!2zzpHOuM6uzr3OsQ!5e0!3m2!1sel!2sgr!4v1652863273042!5m2!1sel!2sgr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<section >
  <h1>Επικοινωνία</h1><br>
  <i ></i><h4>Το κατάστημά μας:</h4><br>
   <h4><i ></i>Το κατάστημά μας:</h4><br>
</section>

CodePudding user response：

you just need to add

position: relative;

to your .ellenonmap class. And then you can adjust the style however you want to.