Question

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

有没有办法将第二个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? */ }定位在第一个？{/ p>之下？

＆＃13;

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

＆＃13;

var sortByYear = document.getElementsByClassName('sortbtn')[0];
var sortByName = document.getElementsByClassName('sortbtn')[1];
var sortByLname = document.getElementsByClassName('sortbtn')[2];
sortByYear.style.background = 'red';
sortByName.style.background = 'cyan';
sortByLname.style.background = 'yellow';

＆＃13;

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

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

我相信您的网页存在结构问题。我会创建一个父DIV来管理你的背景颜色和定位，然后你的孩子DIV来管理内容。

Answer 3

你可以使用position：relative然后使用margin调整div的位置，通过使用div id并将其放在适当的位置。或者你将身体放在中心标签内。

将div放在绝对定位的div下

3 个答案: