javascript - HTML 对象没有以正确的……顺序显示？

Question

    $('.enter_link').click(function () {
        $(this).parent('#splashscreen').fadeOut(500);
    });

    #splashscreen {
        position: fixed;
        top: 50%;
        left: 50%;
        /* bring your own prefixes */
        transform: translate(-50%, -50%);
        min-height: 100%;
        height: 100%;
        width:100%;
        background-color:white;
    }
    
    #splashscreen a, h2 {
        position: fixed;
        top: 50%;
        left: 50%;
        /* bring your own prefixes */
        transform: translate(-50%, -50%);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <div id="splashscreen">
	    <h2>
	    Hello
	    </h2>
	    <a href="#" class="enter_link">Enter on the website</a>
	</div>

	<div>
	    <h1>Our website is so cool</h1>
	    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
	</div>

老实说，我是 HTML 的初学者。我使用 #splashscreen a, h2 CSS 将内容放在页面中间。但是，出于某种原因，它们没有按逻辑(我的逻辑，至少)顺序出现。出现在“进入网站”链接中的第一件事，在它下面，“你好”。如何修复我的 CSS 以使其成为相反的方向？

Answer 1

它之所以这样显示是因为您将这两个元素都放在了同一位置，但默认情况下 h2 元素有相当多的顶部和底部边距，因此该边距使 h2 看起来更低了。事实上，这不是因为您的规则再次将两个元素放在同一个位置。

有无数种方法可以修复它。例如，您可以删除 h2 的上边距并将其添加到 a:

#splashscreen a {
  margin-top: 1em;
}

#splashscreen h2 {
  margin-top: 0;
}

例子:

$('.enter_link').click(function() {
  $(this).parent('#splashscreen').fadeOut(500);
});

#splashscreen {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  min-height: 100%;
  height: 100%;
  width: 100%;
  background-color: white;
}

#splashscreen a,
h2 {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

#splashscreen a {
  margin-top: 1em;
}

#splashscreen h2 {
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id="splashscreen">
  <h2>
    Hello
  </h2>
  <a href="#" class="enter_link">Enter on the website</a>
</div>

<div>
  <h1>Our website is so cool</h1>
  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>

...但同样，这只是众多不同选项中的一个，具体取决于您的总体目标