身体::之前是在前面 - 为什么？

时间：2016-05-21 11:14:07

标签： css

JsBin：http://jsbin.com/wifayesole/2/edit?html,css

＆＃13;
＆＃13; 
body {
  position: relative;
  background-image: url("http://animaliaz-life.com/data_images/cat/cat8.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  margin: 0px;
  background-color: black;
}
body::before {
  position: absolute;
  content: '';
  background-color: rgba(44, 62, 80, 0.7);
  width: 100%;
  height: 100%;
}
#body-container {
  background-color: white !important;
  height: 2000px;
}
.container {
  border: 1px solid red;
}
header {
  border: 1px solid blue;
}
nav {
  margin: 100px 0px !important;
  border: 1px solid yellow;
}
.nav > li > a > img {
  width: 70px;
  height: 70px;
}
.nav {
  display: inline-block;
  text-align: center !important;
}
.navbar-brand {
  height: auto !important;
  padding-left: 0px !important;
}
.navbar-brand > img {
  height: 70px;
}
.icon-0 {
  background-color: #2ecc71;
}
.icon-1 {
  background-color: #3498db;
}
.icon-2 {
  background-color: #9b59b6;
}
.icon-3 {
  background-color: #f1c40f;
}
.icon-4 {
  background-color: #e74c3c;
}
.icon-5 {
  background-color: #f39c12;
}
.icon-6 {
  background-color: #34495e;
}
.icon-7 {
  background-color: #2ecc71;
}
＆＃13; 
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<header>
  <!--   NAVIGATION   -->


  <!-- Fixed navbar -->
  <nav class="navbar navbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="/_Resources/Static/Packages/VMP.Website/Images/vmp_logo_text_white.png" alt="Logo">
        </a>
      </div>


      <div class="navbar-collapse collapse">

        <ul class="nav navbar-nav">


          <li class="normal dropdown">
            <a role="button" aria-expanded="true" data-toggle="dropdown" class="dropdown-toggle" href="/test-1.html">
              <img class="icon-0" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/0.png" alt="Verein" />
              <!--<span class="caret"></span>-->
            </a>
            <ul class="dropdown-menu" role="menu">

              <li class="normal"><a href="/test-1/test-sub.html">test sub</a>
              </li>

            </ul>
          </li>



          <li class="normal">
            <a href="/test-2.html">
              <img class="icon-1" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/1.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-3.html">
              <img class="icon-2" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/2.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-4.html">
              <img class="icon-3" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/3.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-5.html">
              <img class="icon-4" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/4.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-6.html">
              <img class="icon-5" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/5.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test.html">
              <img class="icon-6" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/6.png" alt="Verein" />
            </a>
          </li>


        </ul>
      </div>
      <!--/.nav-collapse -->


    </div>
  </nav>

</header>

<!--   CONTENT   -->
<div class="container" id="body-container">
  <div class="neos-contentcollection">
    <div class=" typo3-neos-nodetypes-text">
      <div>
        <p>This is the homepage</p>
      </div>
    </div>
    <div class=" typo3-neos-nodetypes-text">
      <div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>

<!--    FOOTER     -->
<footer>
  <div class="container">
    <hr />

    <div class=" typo3-neos-nodetypes-text">
      <div></div>
    </div>
  </div>
</footer>
＆＃13;
＆＃13;
＆＃13;

问题1：彩色叠加层位于导航后面，但位于主要内容区域的前面。

我的解决方案：将z-index设置为bod::before。但我认为这只是一个黑客攻击。我该如何解决？

问题2：如果我从border标记移除header，我会发现body::before获得了margin-top类似的内容。

MySolution：只需添加例如margin-top: -100px;或body::before的任何内容。我认为这只会以某种方式错误地实现整体工作，并且不好。

有人可以告诉我这里有什么问题吗？

如果你编辑帖子并转发它，请确保共享快照（当你继续选择＆＃34;分享＆＃34;）

2 个答案:

答案 0 :(得分：1)

在没有任何z-index的情况下，定位元素（和伪元素）总是显示在未定位的元素之上。

所以是的，解决方案是应用z-index。根本不是hackish。

关于问题2，只需使用left和top作为绝对定位的内容。

答案 1 :(得分：1)

1）您可以将z-index:-1设置为伪。

body background将在HTML background中绘制，因此body:before仍然会站在其上而不再是body身体及其内容。

为什么这个工作和伪不会被隐藏？

position:relative;即使没有z-index也是fixed（absolute或static定位也是如此），它出现在助推器中的任何其他元素前面HTML位置，此处唯一的其他元素是z-index。身体儿童在同一水平的身体上定位。

  

关于绘制bg的位置的说明：https://www.w3.org/TR/css3-background/#special-backgrounds

     

2）对于标题，您将看到正在实施的合并边距效应。

  

它是什么？对初学者来说是一个经典令人困惑的事情;）见https://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding#Collapsing_margins

边框（可以是透明的）或填充是一种将其包含在内部而不是在外部应用的方法。

以下代码段与padding和border代替body { position: relative; background-image: url("http://animaliaz-life.com/data_images/cat/cat8.jpg"); background-position: top center; background-repeat: no-repeat; margin: 0px; background-color: black; } body::before { position: absolute; z-index:-1; content: ''; background-color: rgba(44, 62, 80, 0.7); width: 100%; height: 100%; } #body-container { background-color: white ; } .container { border: 1px solid red; } header { padding:1px; } nav { margin: 100px 0px !important; border: 1px solid yellow; } .nav > li > a > img { width: 70px; height: 70px; } .nav { display: inline-block; text-align: center !important; } .navbar-brand { height: auto !important; padding-left: 0px !important; } .navbar-brand > img { height: 70px; } .icon-0 { background-color: #2ecc71; } .icon-1 { background-color: #3498db; } .icon-2 { background-color: #9b59b6; } .icon-3 { background-color: #f1c40f; } .icon-4 { background-color: #e74c3c; } .icon-5 { background-color: #f39c12; } .icon-6 { background-color: #34495e; } .icon-7 { background-color: #2ecc71; }。这些不是黑客，而是功能。 

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<header>
  <!--   NAVIGATION   -->


  <!-- Fixed navbar -->
  <nav class="navbar navbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="/_Resources/Static/Packages/VMP.Website/Images/vmp_logo_text_white.png" alt="Logo">
        </a>
      </div>


      <div class="navbar-collapse collapse">

        <ul class="nav navbar-nav">


          <li class="normal dropdown">
            <a role="button" aria-expanded="true" data-toggle="dropdown" class="dropdown-toggle" href="/test-1.html">
              <img class="icon-0" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/0.png" alt="Verein" />
              <!--<span class="caret"></span>-->
            </a>
            <ul class="dropdown-menu" role="menu">

              <li class="normal"><a href="/test-1/test-sub.html">test sub</a>
              </li>

            </ul>
          </li>



          <li class="normal">
            <a href="/test-2.html">
              <img class="icon-1" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/1.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-3.html">
              <img class="icon-2" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/2.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-4.html">
              <img class="icon-3" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/3.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-5.html">
              <img class="icon-4" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/4.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-6.html">
              <img class="icon-5" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/5.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test.html">
              <img class="icon-6" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/6.png" alt="Verein" />
            </a>
          </li>


        </ul>
      </div>
      <!--/.nav-collapse -->


    </div>
  </nav>

</header>

<!--   CONTENT   -->
<div class="container" id="body-container">
  <div class="neos-contentcollection">
    <div class=" typo3-neos-nodetypes-text">
      <div>
        <p>This is the homepage</p>
      </div>
    </div>
    <div class=" typo3-neos-nodetypes-text">
      <div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>

<!--    FOOTER     -->
<footer>
  <div class="container">
    <hr />

    <div class=" typo3-neos-nodetypes-text">
      <div></div>
    </div>
  </div>
</footer>
cin >> s;    // For example write "X++"

相关问题
最新问题