将div放在绝对定位的div下 [英] Place div under a absolute-positioned div
本文介绍了将div放在绝对定位的div下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试用 position：absolute 将< div> 第一个< div> 。不幸的是，我似乎不能这样做，因为第一个< div> 似乎与第二个重叠。我的代码此处。
I have tried to place 2 <div>s under one another with the style position: absolute for the first <div>. Unfortunately, I do not seem to be able to do so as the first <div> seem to be overlapping the second. My code can be found here.
有没有办法将第二个< div> 放在第一个之下？
Is there any way to position the second <div> below the first?
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', Calibri Light, Calibri, Ariel;
}
div#view {
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background-color: #FFEB3B;
}
div h1 {
font-size: 60px;
}
div h4#message {
font-size: 25px;
margin-top: 75px;
}
div h1 span {
color: #616161;
}
div h1#end {
margin-top: 75px;
}
div p {
color: #FFF;
font-size: 30px;
}
div#signup {
/* How to put this <div> below div#view? Is it possible? */
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" type="text/css" rel="stylesheet">
<body>
<!-- Birthday view -->
<div id="view">
<h1 id="start">Hello,<br/><span id="to">world</span>!</h1>
<h4 id="message">How are you?</h4>
<h1 id="end">From,<br/><span id="from">space</span></h1>
<p>↓</p>
</div>
<!-- Signup -->
<div id="signup">
<h1>Whoops, align me at the bottom</h1>
</div>
</body>
推荐答案
div#view {
text-align: center;
position: relative;
float: left;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background-color: #FFEB3B;
}
div#signup {
clear: both;
}
这篇关于将div放在绝对定位的div下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
