Question

我在容器中创建了一个图像拼贴和小标记。现在我想将容器放在图像拼贴上。

html

<section id="signin">
  <div class="photos">
        <img src="http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src="http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src = "http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src = "http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src="http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src="http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
  </div>
  <div class="sign container-fluid">
    <div class ="container">
      <div class="row section_blurb">
        <h1> Sign In </h1>
         <div class="col-xs-12 col-sm-4">
            <a href = "http://www.facebook.com">
            <img  src="images/ic_facebook blue.svg" class = "img-responsive" align = "left"><p>Sign in with facebook</p></a>
            <a href = "https://plus.google.com">
            <img  src="images/ic_google plus red.svg" class = "img-responsive" align = "left"><p>Sign in with google+</p></a>
            <a href = "https://instagram.com/">
            <img  src="images/ic_instagram blue.svg" class = "img-responsive" align = "left"><p>Sign in with instagram</p></a>
            <a href = "#email">
           <img   src="images/ic_email white.svg" class = "img-responsive" align = "left"><p>Sign in with Email</p></a>
        </div>   
      </div>     
    </div>
  </div>  
</section>

CSS

.photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 4;
   -webkit-column-gap:   0px;
   -moz-column-count:    4;
   -moz-column-gap:      20px;
   -moz-row-gap:         20px; 
   column-count:         4;
   column-gap:           0px;
   z-index: auto;


}

.photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  padding-bottom: 20px;
}

容器css是标准的。在上面和下面的登录部分也有不同的部分

Answer 1

您必须将position：relative放在父级：

#signin { position:relative; }

然后您可以使用绝对位置，并且项目将与父项相关联：

.photos { position:absolute; top:0; left:0; z-index:0; }
.sign { position:absolute; top:40px; right:40px; z-index:2; }

以下文章解释：https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Z-index可能比较棘手，但先尝试最简单。：）

Answer 2

我为“.container-fluid”类添加了css：

.photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 4;
   -webkit-column-gap:   0px;
   -moz-column-count:    4;
   -moz-column-gap:      20px;
   -moz-row-gap:         20px; 
   column-count:         4;
   column-gap:           0px;
   z-index: auto;

  background:#adf;

}

.photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  padding-bottom: 20px;
}
.container-fluid{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
}

<section id="signin">
  <div class="photos">
        <img src="http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src="http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src = "http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src = "http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src="http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
        <img src="http://www.hdwallpapersimages.com/winter-tiger-wild-cat-images/31073/">
  </div>
  <div class="sign container-fluid">
    <div class ="container">
      <div class="row section_blurb">
        <h1> Sign In </h1>
         <div class="col-xs-12 col-sm-4">
            <a href = "http://www.facebook.com">
            <img  src="images/ic_facebook blue.svg" class = "img-responsive" align = "left"><p>Sign in with facebook</p></a>
            <a href = "https://plus.google.com">
            <img  src="images/ic_google plus red.svg" class = "img-responsive" align = "left"><p>Sign in with google+</p></a>
            <a href = "https://instagram.com/">
            <img  src="images/ic_instagram blue.svg" class = "img-responsive" align = "left"><p>Sign in with instagram</p></a>
            <a href = "#email">
           <img   src="images/ic_email white.svg" class = "img-responsive" align = "left"><p>Sign in with Email</p></a>
        </div>   
      </div>     
    </div>
  </div>  
</section>

现在“signin-container”在“.photos div”之外，因为它在#signin里面有它的尺寸。你可以在照片中移动你的“signin-container”div，它将完全重叠。

容器上面的图像拼贴在HTML（CSS）

2 个答案: