Loading an iFrame Instance on Top of Another iFrame Instance

Question

I have 3 iFrames on my page. The first iFrame takes up the left 45% of the page. The second iFrame takes up the right 45% of the page. I would like to load a third iFrame that takes up the middle 45% of the page (it would load last and partially cover the other 2 iFrames). After adding the 3rd iFrame, I noticed that instead of loading on top of the other 2 iFrames, it pushed itself to the bottom of the page. Is there a way to get an iFrame to load on top of another iFrame?

My CSS:

.right {
        float: right;
        width: 60%;
        height: 100%;
        background-color: #006400;
       }
#iframe1 {
          width: 181%; 
          height: 182%; 
          top: 50%;
          left: 50%;
          zoom: 1.00; 
          -moz-transform: scale(0.55); 
          -moz-transform-orgin: 0 0;
          -o-transform: scale(0.55); 
          -o-transform-origin: 0 0; 
          -webkit-transform: scale(0.55); 
          -webkit-transform-origin: 0 0;
         }
#frame1 {
              float: left;
              width: 45%; 
              height: 75%; 
              top: 10%;
              left: 2%;
              margin: 10px; 
              border-style: solid; 
              border-width: 10px;
         }         
#frame2 {
              float: right;
              width: 45%; 
              height: 75%; 
              top: 10%;
              right: 2%;
              margin: 10px; 
              border-style: solid; 
              border-width: 10px;
         }
.frame3 {
            float: center;
            width: 45%;
            height: 75%;
            top: 10%;
            left: 27.5%;
            margin: 10px;
            border-style: solid;
            border-width: 10px;
        }

My HTML:

<div class = 'right'>
<div id = 'frame1'>
      <iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></div>
<div id = 'frame2'>
      <iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></div>
<div id = 'frame3'>
      <iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></div>
<br><br><br>
</div>

Ohgodwhy · Accepted Answer · 2012-12-20 00:31:55Z

1

.frame3{
    position:absolute;
        top:10%;
        left:27.5%;
    width:45%;
    //other properties
}

because of the absolute position, you'll want to ensure it constrains within it's parent container (if that is the intended effect)

.right{
    position:relative;
    //other properties
}

answered Dec 20, 2012 at 0:31

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading an iFrame Instance on Top of Another iFrame Instance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related