JSFiddle:
JSFiddle of the issue
I'm having a bit of trouble wrapping my head around z-index with relatively positioned elements. Given this html I want the 'active' screen-component to be in front of the other two (yes I know this visually doesn't look good in this example... I've boiled down the problem to the basics):
<div class="parent-container">
<div class="screen-component">
Content inside first screen component
</div>
<div class="screen-component">
Content inside second screen component
</div>
<div class="screen-component active">
Content inside active component.. I want this up top
</div>
</div>
And this css:
.parent-container {
position: relative;
}
.screen-component {
position: relative;
z-index: 2000;
}
.screen-component.active {
position: relative;
z-index: 5000;
}
The desired effect I want is any 'screen-component' with the 'active' class to be positioned in front of the other ones; however right now they all seem to be given new lines, despite the .active class having a z-index higher than the .screen-component class
I think you want something like this:
http://jsfiddle.net/ZCBXA/3/
(The background colors are just for demonstration purposes)
.parent-container {
position: relative;
}
.screen-component {
position: absolute;
z-index: 2000;
top:0px;
left:0px;
background-color: #f00;
}
.active {
z-index: 5000;
background-color: #0f0;
}
If I'm understanding what you're trying to do correctly, you need position: absolute; not position: relative;. Then give the div class a top value so that all divs with that class are the same distance from the top, and a z-index of -1 to hide them. The only thing the active class needs is a higher z-index than the others.
.parent-container {
position: relative;
}
.screen-component {
position: absolute;
top:0;
z-index: -1;
}
.screen-component.active {
z-index: 0;
}
Related
The wrapper displays on the top of the first parent element. Good!
The problem:
However the second parent element is on the top of the wrapper element, and I can't figure it out why. It needed behind the child element like the first parent. (In real life it's a modal, but I tried to simplify the problem.)
The parent element is sticky (and I can't change it.)
The wrapper element must be an absolute position element.
I've tried to change z-indexes, add extra wrappers, asked openAI, with no luck.
Basically it looks like this (scss):
.parent {
width: 100px;
height: 100px;
background-color: blue;
z-index: -1;
position: sticky; // <-must be sticky
.wrap {
position: absolute; // <-must be absolute
top: -5px;
left: -5px;
z-index: 1;
width: 50px;
height: 210px;
background-color: red;
}
}
And the HTML:
<div class="parent">
<div class="wrap"></div>
</div>
<div class="parent"></div>
To see in live the simplified problem: https://codesandbox.io/s/sticky-parent-sp3v3b?file=/src/styles.scss
The second blue box need to be behind the red as well.
Any advice would be nice.
Okay so the solution was it needed to add different indexes to the parent element like this:
.parent {
width: 100px;
height: 50px;
background-color: blue;
position: sticky;
border: 1px solid white; // <-must be sticky
&:first-of-type {
z-index: 1;
}
&:last-of-type {
z-index: -1;
}
please, is there any way, to show child over parents overlay?
What I want to achieve - I have div #wrapper, which has overlay with some color but I want to show one of its childs elements over this overlay. It means -> over #wrapper, there will be white transparent overlay and over overlay there will be #wrappers childs.
I have this code:
<div id="wrapper">
<div class="overlay-visible"></div>
</div>
Css:
#wrapper {
position: relative;
}
#wrapper::before{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
display: block;
content: "";
}
#wrapper .overlay-visible {
position: relative;
z-index: 999;
}
Thank you very much for your answers.
With the z-index property. The z-index property specifies the stack order of an element.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I need help getting dropdown menu expanding on top. I put z-index on it, yet for some reason I'd like to understand it blends with the rest. The dropdown expands when one types in "Enter your region" on my site 33hotels.com.
I am sorry to post no code but the main problem is I don't know which part of it is responsible for this effect.
Thanks!
EDIT.
Turned out that setting position: absolute instead fixed solved the problem! Also strangely it only was a problem in Chrome and Safari but not Firefox!
Add z-index property to #location-search element. You may just set it to 1.
#location-search {
position: fixed;
z-index: 1;
top: 45px;
margin: 0 5px;
}
Remember, that z-index only works for a fraternal elements - those, who have the same parent. It means, if you have two non-static positioned elements in same parent you can use z-index to place them inside their parent. But as long as they have different parents - you can only rule with their parents z-indecies.
<div id="Wrapper">
<div id="Test1">blue</div>
<div id="Test2">red</div>
</div>
div { position: absolute; }
#Test1 { background: blue; z-index: 10; }
#Test2 { background: red; z-index: 9; }
/* blue is over red, though declared earlier */
But
<div id="Wrapper">
<div id="InnerWrapper">
<div id="Test1">blue</div>
</div>
<div id="Test2">red</div>
</div>
div { position: absolute; }
#InnerWrapper { z-index: 10; }
#Test1 { background: blue; z-index: 15; }
#Test2 { background: red; z-index: 11; }
/* red is over blue, for blue's wrapper has no z-index or lower */
Set z-index to -1 in this css, because your dropdown-menu class is having -z-index of 1000 so you need to set your main content should get behind the autocomplete dropdown.
#row-content {
position: fixed;
top: 85px;
bottom: 0;
width: 100%;
z-index: -1;
}
Also remember to set element positions, because z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
I can't for the life of me figure out how to get the red on top without changing the html structure.
http://jsfiddle.net/GSBtG/
How do I get the red on top? I've red every combination of z-index values and position, etc.
The HTML:
<div id="red">
<div id="green"></div>
</div>
The CSS:
div {
width: 300px;
height: 300px
}
#red {
background: red;
z-index: 10;
position: relative;
}
#green {
background: green;
width: 290px;
z-index: -10
}
Remove the Z-Index from the parenting element and give both elements the same position: rule.
Proof of concept: http://jsfiddle.net/GSBtG/2/#update
Set a negative z-index on the child and remove the z-index on the parent.
#parent {
position: relative;
}
#child {
position: relative;
z-index: -10;
}
jsFiddle
Source
I want to position divs on top of one another. I have created a fiddle. I have three divs. Each div contains an image. I want to position divs so that the div having the largest image is at the bottom and the one having smallest image is on top.
http://jsfiddle.net/bobbyfrancisjoseph/7spcZ/2/
http://jsfiddle.net/bobbyfrancisjoseph/7spcZ/2/show/
Just use this:
#page1 div {
position:absolute;
}
Demo: http://jsfiddle.net/ZwyTY/
Use position absolute with z-index.
use below css
#page-left {
float: left;
margin:5px;
}
#page-right {
float: left;
margin:5px;
}
#largest {
position: absolute;
z-index: 1;
}
#medium {
position: absolute;
z-index: 2;
}
#smallest {
position: absolute;
z-index: 3;
}
http://jsfiddle.net/sannankhalid/sc8qE/
Just use position : absolute;
#largest, #medium, #smallest{
position: absolute;
}
http://jsfiddle.net/w4WBk/
If you want to change the order of what comes on top, you can use z-index
You can use z-index & position: absolute to treat the elements as layers. But as per your requirement and element order, a simple position: absolute is enough
#page1 div {
position:absolute;
}
Couldn't you just change the order of the div's? Either that or target each one with position relative.
you can only define the absolute position into your main div that will automatically call the images as orderd or coded in your HTML here is no-need to use z-index in your css as per current your requirement.
CSS
#page1 div {
position:absolute;
}
But if you will change the order of #largest,#medium,#smallest div's in your HTML code than you will have to define the z-index property for cover up the images as:-
HTML
<div id ="page1">
<div id = "smallest">
<img src="http://ssl.gstatic.com/android/market/pongoproductions.Brad_Pitt_100100/hi-256-0-acd81f6f98299f7b230fc5014a9eb18c536adc8a"/>
</div>
<div id = "medium">
<img src="http://www.picgifs.com/celebrities/b/brad-pitt/celebrities-brad-pitt-179755.jpg"/>
</div>
<div id = "largest">
<img src="http://www.moviespad.com/photos/brad-pitt-poster-392f6.jpg"/>
</div>
</div>
CSS
#page1 div {
position: absolute;
}
#largest {
z-index: 1;
}
#medium {
z-index: 2;
}
#smallest {
z-index: 3;
}
http://jsfiddle.net/9cg3h/