Question

所以我一直在网页上工作，我试图将一些文字固定在屏幕中央，但是一旦它们向下滚动，文本将会在其他div下面并且是un -seen。这是我的代码：

<div class="parallax">
    <div class="bg__1">
        <div class="Absolute-Center">
        <span style="font-size: 50px; color: aqua">in short.</span><br />
        LIVE LIFE AT YOUR OWN PACE.</div>
        <script>
            $(document).ready(function ($) {
                var h1Animation = 'animated bounceIn';
                $('p').addClass(h1Animation);
            });
        </script>
    </div>
    <div class="bg__2" ></div>
    <div class="bg__3"></div>
    <div class="bg__4"></div>
</div>

我希望<div class="Absolute-Center">在所有以下div（bg__2，bg__3，bg__4）下呈现其内容。
CSS代码：

[class*="bg__"] {
    height: 60vh;
    /* fix background */
    background-attachment: fixed;
    /* center it */
    background-position: center center;
    /* Scale it nicely to the element */
    background-size: cover;
    /* just make it look a bit better ;) */
    &:nth-child(2n) {
        box-shadow: inset 0 0 1em #111;
    }
}

.Absolute-Center {
    width: 300px;
    height: 300px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-right: -150px;
}

我尝试将z-index属性添加到＆＃34; bg__1＆＃34;并且对于'绝对中心＆＃34;，两次尝试都失败了。

Answer 1

只需将z-index: -1添加到.Absolute-Center即可。这将更改生成的框（.Absolute-Center）的堆栈级别。 Here您可以找到有关z-index属性和堆栈顺序的更多信息。

＆＃13;

$(document).ready(function ($) {
  var h1Animation = 'animated bounceIn';
  $('p').addClass(h1Animation);
});

＆＃13;

[class*="bg__"] {
  height: 60vh;
  /* fix background */
  background-attachment: fixed;
  /* center it */
  background-position: center center;
  /* Scale it nicely to the element */
  background-size: cover;
  /* just make it look a bit better ;) */
}

[class*="bg__"]:nth-child(2n) {
  box-shadow: inset 0 0 1em #111;
}

.bg__2 {
  background: url('http://placehold.it/1200x500');
}
.bg__4 {
  background: url('http://placehold.it/1200x500');
}


.Absolute-Center {
  width: 300px;
  height: 300px;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-right: -150px;
  z-index: -1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parallax">
  <div class="bg__1">
    <div class="Absolute-Center">
      <span style="font-size: 50px; color: aqua">in short.</span><br />
      LIVE LIFE AT YOUR OWN PACE.
    </div>
  </div>
  <div class="bg__2"></div>
  <div class="bg__3"></div>
  <div class="bg__4"></div>
</div>

＆＃13;

Answer 2

为了使用z-index，您必须对要使用z-index的元素具有绝对或相对定位。因此，我认为您应该能够将以下内容添加到CSS中以获得所需内容：

.bg__2, .bg__3, .bg__4{position:relative; z-index:2}
.bg__1{z-index:1;}

固定定位ASP.NET的Z-Index

2 个答案: