ページに3つのiFrameがあります。最初のiFrameはページの左側45%を占めます。2番目のiFrameはページの右側45%を占めます。ページの中央の45%を占める3番目のiFrameをロードしたいと思います(最後にロードされ、他の2つのiFrameを部分的にカバーします)。3番目の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>