Develop Reference

How to position second div over first div?

JSFiddle link
z-index cannot be set to -1, positioning cannot be changed for first and second div.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first"></div>
<div class="second"></div>

Apply a transformation (without visible effects) on the second div e.g.
transform: scale(1);
https://jsfiddle.net/cbeaw84h/

Position your second div:
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
position: relative; // This
}

You should use position: relative and they'll overlay.
.second {
position: relative;
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}

If you cannot touch the CSS code really, simply nest the second div inside the first.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first">
<div class="second"></div>
</div>

Hide content if under transparent header

I have a transparent header which can't be a image or a color, it needs to be transparent. Whenever some divs slides under my header I want to hide only the part which is below it.
Problem
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.content {
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
}
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="header"> Header</div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div class="footer">footer</div>

Actually you can achieve this without javascript at all. You can put element "under" the .header with body's background, and set the proper z-index in order to keep it under.
Something like that:
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
}
.content {
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
z-index: 1;
}
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/* this will act as a mask to hide the content when it get "under" the header: */
#contentMask {background: inherit; z-index: 2; position: fixed; top: 0; left: 0; height: 5em; width: 100%;}
<div class="header"> Header</div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div id="contentMask"></div>
<div class="footer">footer</div>
Edit (as for comment):
You can play with z-index property in order to achieve it. This is a general example:
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 4;
}
#contentMask {
background: inherit;
position: fixed;
top: 0;
left: 0;
height: 5em;
width: 100%;
z-index: 2;
}
.content {
position: relative;
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
z-index: 1;
}
.under { z-index: 3; }
.above { z-index: 5; }
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="header"> Header</div>
<div id="contentMask"></div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div class="content under"> SHOW THIS DIV UNDER HEADER</div>
<div class="content above"> SHOW THIS DIV ABOVE HEADER</div>
<div class="footer">footer</div>

Scrollable Overlay with Fixed Content Underneath

I need to make the overlay in this example be able to scroll all the way out of the screen. The content needs to be in a fixed position as it is in the example below. How can I allow the overlay div to be scrolled all the way outside of the viewport?
EXAMPLE SITE:
https://www.ssk.com/
HTML
<div class="test-overlay"></div>
<div class="test-content-container"></div>
CSS
.test-overlay {
background: orange;
position: relative;
width: 100%;
height: 100vh;
text-align: center;
z-index: 995;
}
.test-content-container {
background: rgba(156,64,81,1.00);
position: fixed;
top: 0px;
left: 0px;
font-size: 0;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
}

I solved it by adding 100% padding to the bottom of a container div containing these two elements.
HTML
<div class="test-complete-container">
<div class="test-overlay"></div>
<div class="test-content-container"></div>
</div>
CSS
.test-overlay {
background: orange;
position: relative;
width: 100%;
height: 100vh;
text-align: center;
z-index: 995;
}
.test-content-container {
background: rgba(156,64,81,1.00);
position: fixed;
top: 0px;
left: 0px;
font-size: 0;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
}
.test-complete-container {
height: 100%;
width: 100%;
padding-bottom: 100%;
}

Divs absolute into responsive img

I have a responsive/height image, I want to put absolute elements into img, one by corner but I don't know how to do it, because image size will be dynamic.
Code:
#contenedorimagen {
width: 100%;
background: #000;
}
#imagen {
position: relative;
width: 100vw;
height: 90vh;
vertical-align: middle;
text-align: center;
}
#i {
max-width: 100%;
height: auto;
max-height: 100%;
}
#imagen #c {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
#imagen #h {
position: absolute;
top: 0;
right: 0;
color: #fff;
}
#imagen #pm {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
<div id="contenedorimagen">
<div id="imagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
</div>
Thanks
Example image
firefox

You need to give max-width to image container
#contenedorimagen {
width: 100%;
background: #000;
}
#imagen {
position: relative;
width: 100vw;
height: 90vh;
max-width: 100%;
vertical-align: middle;
text-align: center;
}
#i {
max-width: 100%;
height: auto;
max-height: 100%;
}
#imagen #c {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
#imagen #h {
position: absolute;
top: 0;
right: 0;
color: #fff;
}
#imagen #pm {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
<div id="contenedorimagen">
<div id="imagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
</div>

Maybe you can adapt this example for your exact needs:
#contenedorimagen {
position: relative;
width: 100%;
height: 100%;
}
#contenedorimagen #i {
width: 100%;
height: auto;
display: block;
}
#contenedorimagen div {
background: #000;
padding: 15px;
color: #fff;
}
#c {
position: absolute;
top: 0;
left: 0;
}
#h {
position: absolute;
top: 0;
right: 0;
}
#pm {
position: absolute;
bottom: 0;
left: 0;
}
<div id="contenedorimagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>

How can i make a fixed box inside a div with scroll?

How I can make a box to be fixed within a div with scroll?
I'm trying like this:
HTML:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
background: black;
}
But the box is going along with the page, not only within the div.
What am i doing wrong here??? Can someone show me the way?
Thank you guys.
EDIT
Example -> https://jsfiddle.net/kzhuh7sv/embedded/result/

Try this solution https://jsfiddle.net/yyt8eope/2/
I added a div that wraps both the container div and the class='test' div at the same level so the test div can be absolute inside the wrapper and be always at a fixed position
<div id="wrapper">
<div class="main">
<div class="scroll-container">
<div class="container">
<div class="container2">
</div>
</div>
<div class="test">Fixed inside scroll container</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.scroll-container{
position: relative;
height: 500px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 200px;
color: white;
position: absolute;
top:0;
left: 50%;
margin-left: -250px;
background: black;
z-index: 1;
}

Try getting rid of 'position: fixed;' and add this 'overflow: scroll;'.
JSFiddle.
EDIT
Changed the JSFiddle, has been updated.

You can't do it with position: fixed since it always ties to the viewport. You want it fixed within it's context.
http://jsfiddle.net/zq1m49wf/2/
The black box stays in place as container3 scrolls
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="container3"></div>
</div>
<div class="test"></div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.container {
position: relative;
height: 500px;
padding-top: 200px;
}
.container2 {
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container3 {
height: 1500px;
}
.test {
width: 500px;
height: 500px;
bottom: 0;
background-color: #000000;
position: absolute;
}