Develop Reference

div with a large z-index is under the div with a smaller z-index

I had a problem:
Element overlapped element because it has a higher z-index (10 vs 5). Element has the child elements #sub-block-1 & #sub-block-2, and #sub-block-1 had child text #text1 with z-index = 20. But #text1 with z-index = 20 still under with z-index = 10. Why?
Tell me, how can I solve this problem?
The must have a predefined z-index (number, not 'auto', and less than z-index , for example, 5 vs 10).
My example:
https://jsfiddle.net/nynsjv3L/1/
P.S.
The above example is not displayed correctly in jsfiddle - the position of the elements (#sub-block-1 & #sub-block-2) does not work.
body {
background: #00ff00;
}
.screen {
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
background: #ffffff;
opacity: 0.75;
z-index: 10;
}
#main-block {
position: absolute;
left: 500px;
top: 200px;
width: 700px;
height: 400px;
border: 2px solid #bb0000;
background: #ff0000;
z-index: 5;
}
.sub-block {
position: absolute;
width: 300px;
height: 150px;
background: #ffffff;
border: 4px solid #000000;
}
#sub-block-1 {
left: 100;
top: 100;
z-index: auto;
}
#sub-block-2 {
left: 275;
top: 175;
z-index: 11;
}
#text1 {
position: absolute;
left: 65px;
top: 55px;
color: #000000;
background: #ffff00;
font-size: 30px;
font-weight: 700;
z-index: 20;
}
#text2 {
position: absolute;
left: 65px;
top: 55px;
color: #00bbbb;
font-size: 30px;
font-weight: 700;
}
<div id='main-block'>
<div class='sub-block' id='sub-block-1'>
<div id='text1'>TEST TEXT</div>
</div>
<div class='sub-block' id='sub-block-2'>
<div id='text2'>NEW TEXT</div>
</div>
</div>
<div class='screen'></div>

The #text is still inside your block, that has a lower index than its sibling. The #text part is still in the same context block of its parent. You could check out the inner workings of z-indexes in this page.
You need to create a new stacking context for the text to appear above the other block. One of the possible ways is to change the opacity of the text to .99, or using the transform attribute. I do not recommend you to do it, though, as it will cause more troubles in the future.
Z-indexes should not be used very often. It is better to organize this inside the HTML itself. You should rethink your work.

#main-block is on the same level as .screen and has a lower z-index. So child elements of #main-block will always be overlapped by .screen and its children.
Whenever you set an element to be position: relative or position: absolute you open up a new z-index-stack for all of its children.
You either have to move the child elements of #main-block some levels up to make them independent or give the #main-block a higher z-index which will also result in overlapping .screen.
Hint: Negative z-index is also possible. And clean up your markup (keyword: single quotes). ;-)

How to put my footer always on the bottom of my page? [duplicate]

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How can I have a footer which always stays at the bottom of my page even if this page is too little to fill the entire screen or more ?
I have a button in my page, and when you touch it, it adds thanks to javascript many elements to my page and the page size changed, but my footer doesn't adapt its position.
The problem is when I set the position of my footer to relative, when my page size is too short, he is not at the bottom of my screen, but just under the last element I put on.
I tried position: absolute;, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page.
I don't want my footer to be always visible, but just to be at the real bottom of my page.

Use this:
footer {
position: fixed;
bottom: 0;
/* Add a height and a width! */
}

The complete solution is explained in this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Major trick is, that you will have three parts: Header, Body and Footer:
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}

Use the following
footer {
position: absolute;
bottom: 0;
}

try this one... this will keep your footer at the bottom of your page:
position: fixed;
bottom: 0;
Working demo: https://jsfiddle.net/maky/bgeLbpd9/
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}

Scrolling fixed header displays farther down then desired

I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?

Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;

This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}

Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}

Expand the element's height to bottom of the page

I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.
I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.
The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.
So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?
<style>
.canvas{
position:absolute;
width:100%;
height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
<canvas class="canvas"></canvas>
</div>
Do i need to use JavaScript or is there a CSS method to doing this?

If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:
JS Fiddle
.logo {
height: 40px;
}
.output {
position: absolute;
top: 40px; // height of above content
bottom: 0;
width: 100%;
padding: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
And if you don't know the height of the above content, you can calculate it:
JQuery Example: JS Fiddle
var height = $('header').height();
$('.output').css('top', height);

this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content
https://jsfiddle.net/ca5tda6e/
set the header (.logo) to a fixed height
.logo{
height: 100px;
background-color: lightGray;
position: relative;
z-index: 1;
}
then position the content (.output) absolute, with a padding-top: 100px
.output{
width: 100%;
height: 100%;
box-sizing: border-box; /* so that padding is included in width/height */
padding-top: 100px; /* padding-top should be equal to .logo height */
position: absolute;
top: 0;
left: 0;
overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}

I've had this problem before, in CSS, create this rule....
html, body {
margin: 0;
}

How can I create many divs on on top of the other using CSS/jQuery?

Basically, I want many(>25) divs to be displayed one on top of the other so that only one can be seen at a time. I have the jQuery UI draggable implemented, so once a div is dragged away, the next div is shown. What CSS do I need to make such a stack of divs? jQuery is also available if required.
Thanks!

Try this:
CSS
div.square {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px dashed purple;
position: absolute;
top: 30px;
left: 30px;
font-size: 50px;
line-height: 100px;
text-align: center;
color: white;
}
jQuery + jQueryUI
var count = 25;
var colors = ['red','green','blue','orange','yellow'];
while(count--) {
$('<div/>',{className:'square', text:count}).draggable().css({position:'absolute','z-index':count, text:count, backgroundColor:colors[count % 5]})
.appendTo('body');
}
EDIT:
I just noticed that for some reason in IE and Safari .draggable() overrides the absolute positioning with relative, so you need to set it back to absolute after you made it draggable.
Updated the example above.
http://jsfiddle.net/p9wWA/

You mean something like this?
#relative_container { position: relative; }
#relative_container div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
#relative_container div.item_1 { z-index: 100; } /* Higher index means its more on top */