We Keep Coding

z-index issue for css and html [duplicate]

This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
**Here is a simple code **
div {
border: 1px solid blue;
}
.one {
background-color: red;
width: 300px;
height: 300px;
}
.two {
background-color: orange;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
z-index: 10;
}
.twenty {
background-color: pink;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
z-index: 500;
}
.three {
margin-top: -10px;
margin-left: 10px;
background-color: yellow;
width: 300px;
height: 300px;
}
.four {
background-color: green;
width: 300px;
height: 300px;
position: relative;
top: 80px;
left: 120px;
z-index: 11;
}
<div class="one">
<div class="two">
<div class="twenty">
Can pink be above green?
</div>
</div>
</div>
<div class="three">
<div class="four">
</div>
</div>
How to make the pink square to be above the green square? Is it possible with CSS changes only without HTML changes? Why z-index applied to the .twenty class doesn't work in this case?
Thank you.
This question is NOT a duplicate of Why can't an element with a z-index value cover its child? :
In this question we'd like the child to cover, not the parent!

All layers, except the twentieth, should not have Z order. We specify absolute an order and an order of a layer on Z.
.twenty{
position: absolute;
...
z-index: 1;
}

You should set .four with a lower z-index than .two which is the element that contains .twenty but this may not be the expected result (green also becomes under the orange).
It's not possible without changing the HTML structure, like putting .twenty inside .four, or redefining all the indexes. This is how the stacking context works.
Given this code:
<div class="A">
<div class="One"></div>
<div class="Two"></div>
</div>
<div class="B">
<div class="Three"></div>
</div>
From the top view
From the side view
Lear more about the stacking context:
CSS stacking contexts and z-index made easy
The stacking context

Yes, we can ;)... if orange gets a higher z-index than green...
.two {
...
z-index: 12;
}
It's because pink is a child of orange...

Fixed position when parent is relative

So not sure if this one is possible but from my understanding of the spec the parent of a position fixed element should be the viewport not a parent element with position relative.
That obviously all works when it comes to positioning but not with z-index.
If you take a look at this example,
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 2;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>
https://codepen.io/anon/pen/mmvXaE
The fixed element goes behind the black section if you scroll down, what I need is a way to get the red element to the front without moving it out of el-one.
I have a project where some embed code needs to become fixed when you scroll past it, this is a better example of the actual code. The example above just highlights the issue in a simple way:
<div class="parent">
<div class="el-one">
<div id="my-wrapper">
<iframe class="im-fixed"></iframe>
</div>
</div>
<div class="el-two"></div>
</div>
,
I found this online talking about what I believe has caused the issue: https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements but no luck finding a workaround.
All I can think of is using JS to move the element from where an editor puts the embed code and prepending it to the body when the user scrolls past the element.
Anyone else come across this or have any ideas?

You want something like this? Increase the z-index of .el-one higher than the one you want to overlap
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 99;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>

Use the following:
.el-two {
position: relative;
z-index: -1;
background-color: black;
height: 500px;
width: 100%;
}

There are several ways to solve this issue. Increasing Z-Index, cleaning up the div and etc.
I think you are sort of trying sticky header functionality. There is a new value for position CSS attribute.
position: sticky
I have cleaned up the code and removed all Z-Index. Please check the attached code snippet.
Note: Supported only in Chrome, Firefox
Not supported in IE.
.parent {
background-color: green;
position: relative;
width: 100%;
height: 5000px;
}
.header {
position: sticky;
top: 0px;
left: 0px;
height: 50px;
background-color: yellow;
}
.el-one {
background-color: blue;
color: white;
height: 100px;
width: 100%;
}
.el-two {
background-color: orange;
height: 500px;
width: 100%;
}
<div class="parent">
<div class="header">I am a header</div>
<div class="container">
<div class="el-one">
I am el-one
</div>
<div class="el-two">
I am el-two
</div>
</div>
</div>

Animate increase size of div with JQuery/CSS

I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!

Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>

jQuery: on() attached click elements bleed through overlay

What I have is grid of divs to whom I attach click handlers by using jQuery .on() function. When one of elements is clicked on, partly transparent DIV is faded in as overlay over this grid to prevent another element being clicked while dialog box is open.
The problem is that for some strange reason .on('click') events still bleed through overlay layer, as if it wasn't there - I suspect that .on() function is to blame, because when I simply use .click() handler, this overlay works fine.
I've tried suggestions to use event.stopPropagation on overlay div to keep this from happening, but I've so far had no luck.
Simplified example:
HTML:
<div class="grid-cointainer">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<div class="overlay"></div>
CSS:
.grid-container {
position: absolute;
top: 0px;
left: 0px;
width: 400px;
height: 100px;
}
.grid-item {
float: left;
display: inline-block;
width: 100px;
height: 100px;
background-color: #666;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
width: 400px;
height: 100px;
background-color: #fff;
display: none;
opacity: 0.5;
z-index: 999
}
JS:
$('.grid-item').on( "click", function() {
showAwesomeDialog(this);
$('.overlay').css("display","block");
});

How to get rid of flicker during scrolling for artificially fixed elements?

This is a very simple example of sticking an element at the top of another element's visible area. When .container is scrolled, .fixed stays at the top.
<div class="container">
<div class="fixed">fixed content</div>
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
<style type="text/css">
.container {
position: relative;
border: 1px solid blue;
overflow: auto;
width: 250px;
height: 250px;
}
.content {
height: 500px;
width: 500px;
}
.fixed {
position: absolute;
width: 500px;
margin-top: 2rem;
border 1px solid red;
}
</style>
<script type="text/javascript">
$('.container').scroll(function () {
var top = $('.container').prop('scrollTop');
console.log(top);
$('.fixed').css('top', top);
});
</script>
The problem with this is that if the browser is not fast enough, the .fixed element flickers when I scroll. It lags behind the scroll (compare the position of the text in .fixed to the text in .content as you're scrolling). On my desktop it works flawlessly, but when I try running this in Chromium in a virtual machine, I can see the flicker.
Is there any other way to catch the scroll event and set the position of my .fixed element before the browser renders the page?
edit Updated example to include horizontal scrolling. The fixed element should only be fixed vertically.

Use a double container:
<div class="container-wrapper">
<div class="fixed">fixed content</div>
<div class="container">
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
</div>
With the CSS:
.container-wrapper {
position: relative;
border: 1px solid blue;
overflow: hidden;
width: 250px;
height: 250px;
}
.container {
overflow: auto;
width: 100%;
height: 100%;
}
.content {
height: 500px;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
width: 245px;
border 1px solid red;
z-index: 10;
}
This way you won't need jQuery to reposition the .fixed div when you scroll, and it won't flicker.
EDIT To address the horizontal scrolling...
$('.container').on('scroll', function() {
var left = this.scrollLeft;
$('.fixed').css('left', -left + 'px');
});
This should move the .fixed div without flickering. In your solution, the flickering was caused because the browser moved your div while scrolling, and the event handler then moved it again. Now it will only move once.