将 div 置于绝对定位 div 下

Question

我尝试将 2 个 <div> 放在另一个下面，第一个 <div> 的样式为 position: absolute。不幸的是，我似乎无法这样做，因为第一个 <div> 似乎与第二个重叠。可以找到我的代码 here.

有没有办法将第二个 <div> 放在第一个下面？

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>&darr;</p>
  </div>

  <!-- Signup -->
  <div id="signup">
    <h1>Whoops, align me at the bottom</h1>
  </div>
</body>

Answer 1

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;
}

Answer 2

you can use position:relative and then adjust the position of div using margin, by using div id and put it in proper position. or you put body inside center tag.

Answer 3

通过将 div#view 设置为 position: absolute;，您可以将其从正常的文档流中移除。这意味着其他元素将自行排列，就好像绝对定位的元素不存在一样。

我认为您的页面存在结构问题。我会创建一个父级 DIV 来管理您的背景颜色和位置，然后您的子级 DIV 来管理内容。

将 div 置于绝对定位 div 下

Place div under a absolute-positioned div

html

css

css-position