Question

我正在尝试使用相对/绝对定位来对一些div进行分层。我似乎无法解决的问题是包装div下面的div。

查看此jsfiddle以了解我的意思。

注意div.more-stuff的位置。我希望div显示在div＃wrap。下面。

#wrap {
position: relative;
width: 100%;
}
.node-content {
position: absolute;
top: 30%;
left: 5%;
width: 80%;
background: rgba(236, 240, 241, 1.0);
padding: 5%;
}
.bg-img img {
width: 100%;
height: 300px;
background: rgba(192, 57, 43, 1.0);
}
.more-stuff {
}

Answer 1

我只是对CSS进行了一些改动，你可以在下面的代码中看到，小提琴是：

FIDDLE

CSS

body {
    background: rgba(46, 204, 113, 1.0)
}
#main-container {
    width: 50%;
    margin: 0 auto;
}
#wrap {
    position: relative;
    width: 100%;

}
.node-content {
    position: relative;
    top: 0%;
    left: 5%;
    width: 80%;
    background: rgba(236, 240, 241, 1.0);
    padding: 5%;

}
.bg-img img {
    position:absolute;
    width: 100%;
}
.more-stuff{
    position: relative;
    width: 100%;
    background: rgba(192, 57, 43, 1.0);
    margin: 0 auto;
}

Answer 2

这就是你需要的东西吗？

.more-stuff {
    position: absolute;
  top: 0;
  z-index: -1;
}

https://jsfiddle.net/ymdahi/3qypLpsd/embedded/result/

Answer 3

似乎问题是试图使用相对/绝对定位来协调浮动一个div而不是另一个。这似乎是错误的方式 - 我在php.net找到的正确方法：

将position: relative;添加到我想要在封面图像div上定位的div上。查看最终Smashing Mag。

以下是要运行的代码段：

＆＃13;

body { background: rgba(46, 204, 113,1.0) }

  #main-container { width: 80%; max-width: 1200px; margin: 0 auto; }

  .cover-photo { max-height:  520px; overflow:  hidden; }
  .cover-photo img { width: 100%; height: auto; background: rgba(192, 57, 43,1.0); }
  
  .content-region { 
    position: relative; /* add position: relative to floating region, but do not add position: absolute to wrapping div. */
    width: 80%;
    padding: 25px;
    margin: -215px auto 25px;
    background: rgba(236, 240, 241,1.0);
  }

  .left-col { float: left; width: 30%; }
  .right-col { float: right; width: 69%; }

  .below-content { padding: 50px; background: #000; color: #fff; }
  
  .clearfix:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
   }
  .clearfix { display: inline-block; }
  /* start commented backslash hack \*/
  * html .clearfix { height: 1%; }
  .clearfix { display: block; }
  /* close commented backslash hack */

＆＃13;

<div id="main-container">
  
  <div class="cover-photo">
	<img src="http://static.pexels.com/wp-content/uploads/2014/05/iphone-macbook-air-man-156-825x550.jpg">
  </div>
  
  <div class="content-region clearfix">
    
    <div class="left-col">
      <h1>The title of the page</h1>
      <p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis.</p>
      <h2>The title of the page</h2>
      <p>Doloremque! Phasellus faucibus! Repellat iure eleifend ullam neque debitis culpa, condimentum et aute voluptatibus odio eiusmod similique tempora facere doloribus itaque. Dictumst neque interdum. Nonummy</p>
    </div><!-- left-col -->
       
    <div class="right-col">
      <h1>Main content column</h1>
      <p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
      <p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
      <p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
      <p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
    </div><!-- right-col -->
  
  </div> <!-- content-region -->
  
  <div class="below-content">
        <h1>Other things below content</h1>
        <p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
  </div><!-- below-content -->
  
</div><!-- #main-container -->

＆＃13;

在使用相对/绝对定位对div进行分层时保持div的高度

3 个答案:

FIDDLE