I've got a div with overflow: hidden, and a fairly large collection of elements inside it, which I want to be hidden while overflowing their parent. However I've also got two custom dropdowns, which I'd like to overlap and exit the div while open. Is there anyway to avoid the overflow hidden effect for specific elements? Here's an example. Say I want the blue square to go over the red border and overflow it's parent's bounds, but want the green one to remain cut off and hidden.
YOu can overlap/hidden of certain element with pseudo elements see this example.
html
<div class="red">
<div class="blue"></div>
<div class="green"></div>
</div>
css
* {
box-sizing: border-box;
}
.red {
position: relative;
border: 3px solid red;
width: 300px;
height: 300px;
}
.red:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 70px;
background: rgb(243, 245, 246);
bottom: -70px;
z-index: -1;
}
.blue,.green {
position: absolute;
width: 70px;
height: 70px;
bottom: -40px;
}
.blue {
background-color: blue;
z-index: 1;
left: 40px;
}
.green {
background-color: green;
z-index: -1;
right: 40px;
}
here is fiddle
Related
Is there a way to manipulate the stacking context this way? I want the text to be on the top of the blue element.
div{
width: 200px;
height: 200px;
position: absolute;
}
#a{
z-index: 0;
background-color: red;
left: 150px;
top: 150px;
}
#b{
z-index: 1;
background-color: blue;
left: 0;
top: 0;
}
p{
z-index: 2;
}
<div id="a">
<p>verylongtext</p>
</div>
<div id="b"></div>
Is there any wild card or something like !important which can override the stacking context? The only way to do this is make the text an independent element?
Yes you can, the trick is to keep the red element with z-index:auto so that p will not belong to its stacking context and can be placed above the blue element.
auto
The box does not establish a new local stacking context. The
stack level of the generated box in the current stacking context is
the same as its parent's box.ref
Don't forget to make the p positioned in order to be able to use z-index:
div {
width: 200px;
height: 200px;
position: absolute;
}
#a {
background-color: red;
left: 150px;
top: 150px;
}
#b {
z-index: 1;
background-color: blue;
left: 0;
top: 0;
}
p {
z-index: 2;
position: relative;
}
<div id="a">
<p>verylongtext</p>
</div>
<div id="b"></div>
You can also remove everything and play only with margin:
div {
width: 200px;
height: 200px;
}
#a {
background-color: red;
margin-left: 150px;
margin-top: 150px;
overflow:hidden; /*remove margin-collapsing*/
}
#b {
background-color: blue;
margin-top: -350px;
}
<div id="a">
<p>verylongtext</p>
</div>
<div id="b"></div>
You can refer to this question ( Strange behavior of background when elements are overlapping) to understand how it works.
It is unfortunately impossible to break the stacking context in this way, as a child's z-index is set to the same stacking index as its parent. You will need to make the text a sibling element, and additionally make sure it has a position other than static in order for the z-index to apply.
From here, it's a simple matter of positioning it as desired (in this case with top: 150px and left: 150px.
This can be seen in the following:
div {
width: 200px;
height: 200px;
position: absolute;
}
#a {
z-index: 0;
background-color: red;
left: 150px;
top: 150px;
}
#b {
z-index: 1;
background-color: blue;
left: 0;
top: 0;
}
p {
position: absolute;
z-index: 2;
top: 150px;
left: 150px;
}
<div id="a"></div>
<div id="b"></div>
<p>verylongtext</p>
Why is the red div in front of the green div when I remove z-index from .wrapperRed?
It feels like z-index is inherited up the chain.
If I change the z-index of the green div to 6, it stays in front of the red one even after removing the line described in the first sentence.
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */
}
.red {
position: absolute;
height: 100%;
width: 100%;
background-color: red;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="red"></div>
</div>
<div class="green"></div>
When you remove z-index from .wrapperRed, the element defaults to z-index: auto.
In this case, both .red and .green participate in the same stacking context because positioned elements do not create a stacking context when z-index is auto (reference).
Learn more about z-index and stacking contexts here: Basics of the CSS z-index property
Why is the .red div in front of the green div when I remove z-index
from .wrapperRed?
Because .red no longer has a parental z-index to constrain it.
ie.
Before: .red has a z-index of 5 within a parental z-index of 1.
After: .red has a global z-index of 5.
N.B. In both Before and After cases, .wrapperRed is always behind .green. But, when it is unconstrained, .red (which is 100% the width and height of .wrapperRed) appears in front of .green.
You can see this more easily if you give the parent and child divs different background colours and make the child div smaller than the parent.
Compare:
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
background-color: red;
z-index: 1;
}
.yellow {
position: absolute;
height: 75%;
width: 75%;
background-color: yellow;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="yellow">
</div>
</div>
<div class="green"></div>
with:
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
background-color: red;
}
.yellow {
position: absolute;
height: 75%;
width: 75%;
background-color: yellow;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="yellow">
</div>
</div>
<div class="green"></div>
I ran into this challenge: fiddle. The short story is, I want to have the green block in the middle of the z-order, without having to change the HTML. So yellow on the bottom, green in the middle, and red on top.
.parent {
background-color: yellow;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
z-index: 1;
}
.child {
background-color: red;
position: relative;
top: 10px;
left: 20px;
height: 50px;
width: 150px;
z-index: 100;
}
.other-guy {
background-color: green;
position: absolute;
top: 40px;
left: 100px;
height: 200px;
width: 200px;
z-index: 50;
}
<div class="parent">
Chillin in the background
<div class="child">
I really want to be on top.
</div>
</div>
<div class="other-guy"> I want to be in the middle! </div>
The longer story is, in my solution I'm using bootstraps grid system to position the child element so the whole thing is responsive. The middle layer is a Google Maps element that needs to be manipulated by the user. My previous solution had an absolutely positioned child element on the map, which works, but I don't know how to make that responsive.
My new solution works great from a responsive angle, but then I found out that the parent is blocking interaction with the maps.
So I now need a solution have some responsive elements on top of Google Maps.
I removed the position absolute from the yellow div and removed the z-index from the green div. Maybe this is something as you said.
.parent {
background-color: yellow;
top: 0;
left: 0;
height: 200px;
width: 200px;
z-index: 1;
}
.child {
background-color: red;
position: relative;
top: 10px;
left: 20px;
height: 50px;
width: 150px;
z-index: 2;
}
.other-guy {
background-color: green;
position: absolute;
top: 40px;
left: 100px;
height: 200px;
width: 200px;
}
<div class="parent">Chillin in the background
<div class="child">I really want to be on top.</div>
</div>
<div class="other-guy">I want to be in the middle!</div>
Check out this article:
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
If this article is right and I understood it correctly, then it's not possible, because yellow and red are part of the same stacking context.
I did accomplish your goal by adding jquery to your fiddle and adding this line of code to actually move the green element into the yellow one:
$(".other-guy").insertAfter(".child");
I have a sidebar split into two divs with an equal z-index.
The first div, top, has a link that shows another div, hover when you hover over it.
hover extends down into the bottom div, bottom, but since top and bottom have the same z-index, hover is covered by bottom.
No matter how high of a z-index I give bottom, that only affects how it is displayed within top. How can I get it to cover up bottom?
By the way, I also want to do the same thing to bottom, so there will be a bottom-hover that should cover up top.
So giving top and bottom different z-indexes isn't an option.
Here's a fiddle to demonstrate: http://jsfiddle.net/tsnuh7q1/
html:
<div class="top">top
<div class="hover">HOVER</div>
</div>
<div class="bottom">bottom<div>
css:
.top {
width: 200px;
height: 100px;
background: blue;
z-index: 3;
position: relative;
}
.hover {
z-index: 40;
width: 170px;
height: 300px;
position: absolute;
background: red;
left: 30px;
}
.bottom {
width: 200px;
height: 100px;
background: green;
z-index: 3;
position: relative;
}
The child z-index is always in the context of the parent.
Take
#A { z-index: 1; }
#B { z-index: 2; }
#A * { z-index: 1000; }
children of #A will always be under #B and it's children. The context of their z-index is a lower layer.
Came accross this question whilst searching for a solution for my own issue. Couldn't help but giving it a go.
If I understand correctly what you're trying to do why not do it like this?
http://jsfiddle.net/tsnuh7q1/2/
.top,
.bottom {
width: 100%;
height: 100px;
background: lightblue;
position: relative;
}
.bottom {
background: green;
}
.hover {
position: absolute;
top: 0;
left: 10%;
display: none;
width: 100px;
height: 150px;
background: red;
}
a:hover .hover {
display: block;
}
.bottom .hover {
top: initial;
left: initial;
right: 10%;
bottom: 0;
}
.top:hover,
.bottom:hover {
z-index: 1;
}
<div class="top">top
link<div class="hover">HOVER</div>
</div>
<div class="bottom">bottom
link<div class="hover">HOVER</div>
<div>
I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 200px solid white;
border-top: 40px solid red;
width: 20;
}
http://jsfiddle.net/2bZAW/3675/
This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:
.wrap {
height: 500px;
width: 100%;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 8;
}
.wrap:after {
content: "";
position: absolute;
height: 130%;
width: 100%;
transform: skewY(-4deg);
background: tomato;
top: -50%;
z-index: -2;
left: 0;
}
.lower {
position: absolute;
bottom: 15%;
right: 0;
}
<div class="wrap">
Hello, World!
<div class="lower">Wanted text here?</div>
</div>