重叠Div元素

问题描述 投票:1回答:1

这些天我正在创建自己的投资组合,我想在其上添加一个联系表格。我试过了,但div与这样的页脚重叠。任何人都可以帮我解决这个问题吗?非常感谢。

image

#contactus {height: 105vh; margin:0 auto;}

#formContainer{ width: 85%;  margin: 0 auto; background-color: aqua;   }

.contactHead{ text-align: center}
<div id="contactus">
	
	<div id="formContainer">
		<h1 class="contactHead">Get In Touch!</h1>
		<h4 class="contactHead">I will be with you within 24 hours</h4>
		
		<form id="contactForm">
		<input type="text" id="nameContainer" placeholder="Name">
		<br>
		<br>
		<input type="email" id="emailContainer" placeholder="Email Address">
			
		<br>
		<br>
		<input type="text" id="messageContainer" placeholder="Message">
			
		<br>
		<br>
		<input type="submit" value="Send Message">
		</form>
		
	</div>
	
</div>

fV.png

html css overlapping
1个回答
0
投票

检查这是否有帮助。

您的图片未加载。

enter image description here

#contactus {
    
    position: relative;
    z-index: 1;
}

#formContainer{ width: 85%;  margin: 0 auto; background-color: aqua;   }

.contactHead{ text-align: center}

.footer{
  height:250px;
  background-color:#1e1e1e;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer h2{
  
  color: #fff;
  
}
<div id="contactus">
	
	<div id="formContainer">
		<h1 class="contactHead">Get In Touch!</h1>
		<h4 class="contactHead">I will be with you within 24 hours</h4>
		
		<form id="contactForm">
		<input type="text" id="nameContainer" placeholder="Name">
		<br>
		<br>
		<input type="email" id="emailContainer" placeholder="Email Address">
			
		<br>
		<br>
		<input type="text" id="messageContainer" placeholder="Message">
			
		<br>
		<br>
		<input type="submit" value="Send Message">
		</form>
		
	</div>
	
</div>

<div class="footer">
  <h2>Footer</h2>
  
</div>
© www.soinside.com 2019 - 2024. All rights reserved.