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>

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

Answer 2

您的两个元素都位于页面的中心，但由于位置FIXED，它们重叠。如果检查h2元素（按F12键显示开发人员工具），您将看到它有一个上下边距。 这个看不见的距离基本上将它推到链接下方（它位于页面中间，但比你看到的要大）

如果你添加

h2{
    margin: 0;
}

您会注意到两个元素重叠。

我强烈建议重做代码以避免固定位置。暂时保留这种类型的价值。

您需要的一种简单的代码形式是：

＆＃13;

＆＃13;

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

＆＃13;

    #splashscreen {
        background-color:white;
        color: black;
        text-align: center;
        position: fixed;
        z-index: 100;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    #splashscreen h2 {
        margin-top: 10%;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;