I have created a image collage and small sign in container.Now I want the container to be placed over images collage.
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;
}
The container css is standard.There is also different section above and below signin section
You must place position:relative onto the parent:
#signin { position:relative; }
Then you can use absolute position, and items will be placed in relation to parent:
.photos { position:absolute; top:0; left:0; z-index:0; }
.sign { position:absolute; top:40px; right:40px; z-index:2; }
Here is article explaining: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Z-index can be trickier, but try simplest first. :)
I added the css for the ".container-fluid" class:
.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>
now the "signin-container" is outside the ".photos div", because it is inside the #signin it has its dimensions. You can move your "signin-container" div inside the photos one and it will be perfectly overlapped.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.