我在容器中创建了图像拼贴和小标志。现在我希望将容器放置在图像拼贴上。
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是标准的。在登录部分上下也有不同的部分
最佳答案
您必须将 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 可能比较棘手,但请先尝试最简单的。 :)
关于html - html(css)中图像拼贴上方的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33452043/