divs overlapping each other - html

Question

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #25274D;
font-family: "Trebuchet MS";
}
.link {
text-decoration: none;
color: whitesmoke;
float: left;
font-size: 20px;
font-weight: 700;
padding-right: 1vw;
padding-left: 1vw;
display: block;
transition: 0.4s;
height: 100%;
}
.link:hover {
background-color: #464866;
color: #2E9CCA;
}
a:link,
a:visited {
line-height: 7vh;
}
#top__nav {
text-decoration: none;
top: 0;
position: fixed;
width: 100%;
z-index: 10;
background-color: darkblue;
left: 0;
}
#top__nav__menu {
display: flex;
justify-content: flex-end;
padding-right: 20px;
list-style-type: none;
background-color: darkblue;
}
#logo {
float: left;
position: absolute;
left: 1vw;
}
.Gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-top: 10vh;
position: relative;
}
.revealCard {
position: relative;
background-color: #25274D;
width: 45%;
height: 400px;
z-index: 1;
float: left;
border: 1px solid #464866;
perspective: 1000;
margin: 20px;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.4s linear;
}
.revealCard:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
color: #2E9CCA;
text-align: center;
font-size: 30px;
}
.face.back {
display: block;
transform: rotateY(180deg);
color: #2E9CCA;
text-align: center;
box-sizing: border-box;
padding: 20px auto;
}
.img {
width: 100%;
height: 100%;
}
#dynamicText {
max-width: 100%;
height: 30vh;
font-size: 40px;
}
.appearOnScroll {
color: #2E9CCA;
text-align: center;
padding: 20px 0;
}
#form {
margin-top: 90px;
display: block;
position: relative;
}
.form__fields {
margin-right: 20px;
color: #2E9CCA;
font-size: 25px;
padding: 20px;
}
.input {
position: absolute;
left: 20vw;
line-height: 30px;
color: black;
}
.input:focus {
background-color: #2E9CCA;
color: #25274D;
}
.star {
color: #2E9CCA;
}
.Fields {
padding-top: 20px;
}
<div id="top__nav">
<div id="card">
<ul id="top__nav__menu">
<img id="logo" src="NewProject/Logo.png">
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">Free Trial</a></li>
<li><a class="link" href="#">Samples</a></li>
<li><a class="link" href="#">Q-Bank</a></li>
<li><a class="link" href="#">Help</a></li>
</ul>
</div>
</div>
<div class="Gallery">
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<img class="img" src="https://i.ytimg.com/vi/TdpBRZ0dZhw/maxresdefault.jpg">
</div>
<div class="back face center">
<p>Here are the details of the image! Here are the details of the image! Here are the details of the image!</p>
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
<div class="back face center">
<p>Here are the details of the image! Here are the details of the image! Here are the details of the image!</p>
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcrkTylq_NcR1xOsclrGiDsbEPFpRFlLK_UxpB4zuF9O3Uvwu5">
</div>
</div>
</div>
</div>
<div id="dynamicText">
<p class="appearOnScroll">See the magic below!</p>
<p class="appearOnScroll">Signup For Your Free Beta Trial Today!</p>
<p class="appearOnScroll">This text appears on scroll</p>
<p class="appearOnScroll">This text appears on scroll</p>
<p class="appearOnScroll">This text appears on scroll</p>
</div>
<div id="form">
<form action="">
<div class="Fields">
<label class="form__fields">Full Name :<span class="star"> * </span></label>
<input class="input" type="text" name="full_name" placeholder="Enter your name" required><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 1:<span class="star"> * </span></label>
<input class="input" type="text" name="address_line_1" placeholder="Address line 1" required><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 2:</label>
<input class="input" type="text" name="address_line_2" placeholder="Address line 2"><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 3:</label>
<input class="input" type="text" name="address_line_3" placeholder="Address line 3"><br/>
</div>
<div class="Fields">
<label class="form__fields">Email :<span class="star"> * </span></label>
<input class="input" type="email" name="email" placeholder="Enter your E-mail" required><br/>
</div>
</form>
</div>
The form is coming on top of the text in the div #dynamicText, I have tried many things like removing position:absolute from or clear:both from everywhere but I couldn't fix it. Please help. Also it would be nice if I have to change the css properties of form element only. Thanks in advance.

Answer 1

The height property in the #dynamicText seems to be giving trouble. Removing it takes out the overlap. Alternatively, using min-height instead works as well.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #25274D;
font-family: "Trebuchet MS";
}
.link {
text-decoration: none;
color: whitesmoke;
float: left;
font-size: 20px;
font-weight: 700;
padding-right: 1vw;
padding-left: 1vw;
display: block;
transition: 0.4s;
height: 100%;
}
.link:hover {
background-color: #464866;
color: #2E9CCA;
}
a:link,
a:visited {
line-height: 7vh;
}
#top__nav {
text-decoration: none;
top: 0;
position: fixed;
width: 100%;
z-index: 10;
background-color: darkblue;
left: 0;
}
#top__nav__menu {
display: flex;
justify-content: flex-end;
padding-right: 20px;
list-style-type: none;
background-color: darkblue;
}
#logo {
float: left;
position: absolute;
left: 1vw;
}
.Gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-top: 10vh;
position: relative;
}
.revealCard {
position: relative;
background-color: #25274D;
width: 45%;
height: 400px;
z-index: 1;
float: left;
border: 1px solid #464866;
perspective: 1000;
margin: 20px;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.4s linear;
}
.revealCard:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
color: #2E9CCA;
text-align: center;
font-size: 30px;
}
.face.back {
display: block;
transform: rotateY(180deg);
color: #2E9CCA;
text-align: center;
box-sizing: border-box;
padding: 20px auto;
}
.img {
width: 100%;
height: 100%;
}
#dynamicText {
max-width: 100%;
/*height: 30vh;*/
font-size: 40px;
}
.appearOnScroll {
color: #2E9CCA;
text-align: center;
padding: 20px 0;
}
#form {
margin-top: 90px;
display: block;
position: relative;
}
.form__fields {
margin-right: 20px;
color: #2E9CCA;
font-size: 25px;
padding: 20px;
}
.input {
position: absolute;
left: 20vw;
line-height: 30px;
color: black;
}
.input:focus {
background-color: #2E9CCA;
color: #25274D;
}
.star {
color: #2E9CCA;
}
.Fields {
padding-top: 20px;
}
<div id="top__nav">
<div id="card">
<ul id="top__nav__menu">
<img id="logo" src="NewProject/Logo.png">
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">Free Trial</a></li>
<li><a class="link" href="#">Samples</a></li>
<li><a class="link" href="#">Q-Bank</a></li>
<li><a class="link" href="#">Help</a></li>
</ul>
</div>
</div>
<div class="Gallery">
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<img class="img" src="https://i.ytimg.com/vi/TdpBRZ0dZhw/maxresdefault.jpg">
</div>
<div class="back face center">
<p>Here are the details of the image! Here are the details of the image! Here are the details of the image!</p>
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
<div class="back face center">
<p>Here are the details of the image! Here are the details of the image! Here are the details of the image!</p>
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcrkTylq_NcR1xOsclrGiDsbEPFpRFlLK_UxpB4zuF9O3Uvwu5">
</div>
</div>
</div>
</div>
<div id="dynamicText">
<p class="appearOnScroll">See the magic below!</p>
<p class="appearOnScroll">Signup For Your Free Beta Trial Today!</p>
<p class="appearOnScroll">This text appears on scroll</p>
<p class="appearOnScroll">This text appears on scroll</p>
<p class="appearOnScroll">This text appears on scroll</p>
</div>
<div id="form">
<form action="">
<div class="Fields">
<label class="form__fields">Full Name :<span class="star"> * </span></label>
<input class="input" type="text" name="full_name" placeholder="Enter your name" required><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 1:<span class="star"> * </span></label>
<input class="input" type="text" name="address_line_1" placeholder="Address line 1" required><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 2:</label>
<input class="input" type="text" name="address_line_2" placeholder="Address line 2"><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 3:</label>
<input class="input" type="text" name="address_line_3" placeholder="Address line 3"><br/>
</div>
<div class="Fields">
<label class="form__fields">Email :<span class="star"> * </span></label>
<input class="input" type="email" name="email" placeholder="Enter your E-mail" required><br/>
</div>
</form>
</div>

Answer 2

Remove the height of the dynamicTest div which is set to 30vh. The overlapping divs is caused due to that property.