在另一个iFrame实例上加载一个iFrame实例

Question

我的页面上有3个iFrame。第一个iFrame占据页面的左侧45％。第二个iFrame占用页面的正确45％。我想加载第三个iFrame，占用页面中间的45％（最后加载并部分覆盖其他2个iFrame）。添加第三个iFrame后，我注意到，不是在其他2个iFrame上加载，而是将它自己推到了页面的底部。有没有办法让iFrame加载到另一个iFrame之上？

我的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; 
     } 

我的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>​ 

Answer 1

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

因为绝对的位置，你会想，以确保它在它约束的父容器（如果是预期的效果）

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