CODEWITHSUNDEEP
htmlcssiframe
user2329017
user2329017

Reputation: 55

Div over an iframe

I 've been trying several things but I am not able to set a div over an iframe which displays fullscreen, here's the iframe: 

<iframe src="//domain.com" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; h 
height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>

I would like to show a div fixed on right corner bottom, how can I achieve this?

Thank you in advance

Upvotes: 0

Views: 575

Answers (2)

tjustel
tjustel

Reputation: 80

I'll assume that youre <iframe> is a direct child of page's <body>. You can easily achieve your goal by settings the right right, bottom and z-index properties of your corner div.

Don't forget that the z-index property controls how the elements are placed on the z axis (look at mdn description for more information).

Here is an exemple of what it can looks like :

#iframe {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 0;
}

#corner {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 200px;
  background-color: blue;
  z-index: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <iframe id="iframe" src=""></iframe>
  <div id="corner">I'm in right bottom corner !</div>
</body>

</html>

Upvotes: 2

Alberto Rhuertas
Alberto Rhuertas

Reputation: 773

I hope this can help you.

.right-bottom-corner {
  background-color: red;
  width: 50px;
  height: 50px;
  z-index: 2;
  position: fixed;
  bottom: 0;
  right: 0;
}
<iframe src="//domain.com" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%;height:100%; border:none; margin:0; padding:0; overflow: hidden; z-index:1;"></iframe>
 <div class="right-bottom-corner"></div>

Upvotes: 0

Related Questions