0
当我扩大浏览器的大小时，我的图像div和我的iframe div在某些点保持重叠。防止两个div重叠？
我试图让它们都是静态的，并将它们放在同一个容器（引导程序4）中，但仍然没有任何想法？
https://codepen.io/Modestas/pen/LjvQVb
body {
background: #191a1c;
background: url("http://silviahartmann.com/background-tile-art/images/black_grundge_seamless_tile1.jpg");
background-position: center center;
margin-top: 10px;
}
.top {
text-align: center;
color: white;
width: 50%;
margin: auto;
position: relative;
}
h4 {
font-style: italic;
font-family: serif;
}
.jumbotron1 {
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
color: rgba(256, 256, 256, 0.7);
font-family: serif;
border-radius: 5px;
top: 2.6vw;
*/ margin: 0 auto;
margin-bottom: 15px;
padding: 7px;
position: relative;
}
img {
height: 50vw;
width: 40vw;
opacity: 0.6;
border-radius: 5px;
margin-bottom: 2.7rem;
margin-right: 4rem;
margin-top: 5%;
left: -1.5rem;
right: 0px;
}
iframe {
opacity: 0.5;
border-radius: 5px;
height: 50vw;
width: 20rem;
margin-top: 5%;
margin-left: 5%;
right: 6vw;
}
#jumbo2 {
color: rgba(256, 256, 256, 0.7);
width: 53vw;
height: 100%;
font-family: serif;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
position: relative;
}
#jumbo2 p {
/* font-size: 1.5vw; */
text-align: center;
}
#italic {
font-style: italic;
/* font-size: 1.5vw; */
}
#date {
font-style: italic;
margin-left: 5vw;
margin-bottom: 20px;
/* background-color: rgba(10,10,10,0.5); */
margin: 0 auto;
text-align: center;
border-radius: 5px;
color: rgba(256, 256, 256, 0.7);
}
#wiki {
margin-top: px;
background-color: rgba(10, 10, 10, 0.5);
padding: 5px;
width: 10%;
text-align: center;
color: white;
border-radius: 5px;
/* bottom: 30px; */
margin: 0 auto;
}<div class="container">
<div class="container">
<div class="row">
<div class="top col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1>Zyzz</h1>
<h4>~ The Legacy</h4>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="jumbotron jumbotron1 col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p id="italic">"Everybody one day, will die and be forgotten. Find a passion, form relationships; don't be afraid to get out there and fuck what everyone else thinks"
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<img src="https://s-media-cache-ak0.pinimg.com/564x/0b/70/49/0b704937424f40df354456c91219d0a1.jpg">
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<iframe width="210" height="250" src="https://www.youtube.com/embed/16uDoya2rfQ">
</iframe>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="jumbotron col-12 col-12-sm col-12-md col-12-lg col-12-xl" id="jumbo2">
<p>Aziz Sergeyevich Shavershian AKA "Zyzz" was Born on 24th March 1989.</p>
<p>Zyzz used to be a skinny kid before being inspired to start working out by his bodybuilding brother. From there on his life changed dramatically. His commitment to pushing the physical limits of his body, eating a strict and regulated diet and
getting the right amount of sleep began to manifest and produce amazing results. It was not long before Zyzz had transformed into a greek god who not only looked great but also radiated confidence and charisma.</p>
<p> His "IDGAF" attitude and his relentless commitment to self-improvement and fitness has inspired many people to hit the gym, live a care-free life and ultimately change their entire lives around and encourage them to reach their full potential.</p>
<p> Unfortunately, Zyzz passed away on august 5th 2011, after suffering from a heartattack in a sauna whilst on holiday in Pattaya, Thailand. His cause of death is not fully known but his mother has stated that zyzz has had a history of high blood
pressure and dizziness. Some however, speculate that his death was caused by an abuse of stimulants and anabolic steroids. Nevertheless, Zyzz's death remains to be a controversial topic.</p>
<p> Despite his untimely demise, Zyzz has created a legacy and continues to live on through the many people who he has inspired to better themselves, have fun and make the most of their lives.</p>
</div>
</div>
</div>
<div class="container">
<div class="row ">
<div id="date" class="col-10 col-10-sm col-10-md col-10-lg col-10-xl">
<p>R.I.P, 24 March 1989 – 5 August 2011</p>
</div>
<div class="col-10 col-10-sm col-10-md col-10-lg col-10-xl" id="wiki">
<p>For more information pertaining to Zyzz and his legacy, I invite you to read more
<a href="https://en.wikipedia.org/wiki/Aziz_Shavershian">here</a>.
</p>
</div>
</div>
</div>