How come the higher z-index of a parent for a child gets overridden by another parent?
The child topInner inside top gets overridden by bottom z-index. Is not z-index inherited?
I'll provide a code snippet here.
<style>
.top {
width:300px;
height:20px;
background-color:blue;
z-index:30;
}
.topInner {
width: 300px;
height: 20px;
background-color: green;
z-index: 30;
text-align:center;
}
.bottom {
width: 300px;
height: 60px;
background-color: red;
z-index: 20;
}
<div class="main">
<div class="top">TOP
<div class="topInner">Inner</div>
</div>
<div class="bottom">Bottom</div>
The divs should have position other than static for z-index to work.
working JSFiddle
Related
How do I make a fixed element push other elements to the side when they overlap?
I don't want this:
Or this:
I want this:
I want to know how to make the elements collide or push so that I can easily align the elements without having to position them pixel by pixel.
Edit: I tried positioning a div to be fixed and displaying it as a block, but other elements were still overlapping it. Is it even possible to push elements away from a fixed element?
Is it even possible to push elements away from a fixed element?
I would say no. Not with this concept.
I can think of two solutions that I would not recommend.
Implement it with an iframe. But I would not recommend that.
Using JS to read out the width and assign it to the neighbouring element.
I updated my question after i got a good hint. For this example i added body height 200vh; that you can scroll down to see like it works.
body {
height: 200vh;
}
.verti {
background: red;
width: 200px;
height: 500px;
z-index: 10;
position: fixed;
top: 8px;
}
.hori {
background: green;
width: 500px;
height: 200px;
z-index: 1;
position: relative;
left: 200px;
}
<div class="w">
<div class="hori"></div>
<div class="verti"></div>
</div>
Tried using float? I'm pretty new to all this but this is what I got:
<body>
<div id="container">
<div id="fixed">
<p class="center-text white">Fixed <br>Element</p>
</div>
<div id="not-fixed">
<p class="center-text white">Not Fixed Element</p>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
font-family:arial;
}
.center-text {
text-align:center;
position:relative;
top:45%;
}
.white {
color:white;
}
#container {
margin:10px;
width:700px;
height:700px;
}
#fixed {
background-color:red;
position:fixed;
width:200px;
height:500px;
}
#not-fixed {
position:relative;
background-color:green;
width:500px;
height:200px;
float:right;
}
</style>
</body>
Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
If I have a div that has another div beneath it, would the underlying div's hover state be activated when the cursor is over the top div? Assume that the top div has a z-index of 5 and the other div's z-index is 1.
The short answer is no.
Take the following code as an example:
HTML:
<div id="one">one</div>
<div id="two">two</div>
CSS:
div {
position: absolute;
height: 300px;
width: 300px;
}
div:hover {
background-color: yellow !important;
}
div#one {
top: 0;
left: 0;
background-color: red;
z-index: 10;
}
div#two {
top: 150px;
left: 150px;
background-color: green;
z-index: 1;
}
The hover never activates on div#one when div#two is hovered in the overlapping area.
http://jsfiddle.net/Yff7Q/
Just whipped together something quick.
An element within another element with :hover will work (even on negative z-index).
An element outside the element with the negative z-index won't work.
CodePen | JsFiddle
HTML:
<div class="box">
<div class="inside">
</div>
</div>
<br><br>
<div class="box">
</div>
<div class="outside"></div>
CSS:
.box{
position:relative;
height:250px;
width:250px;
opacity:.4;
background:red;
}
.outside, .inside{
background:blue;
height:100px;
width:100px;
position:absolute;
z-index:-5;
}
.outside{
top:400px;
}
.inside:hover{
opacity:0;
}
.outside:hover{
opacity:0;
}
Here's the fiddle: http://jsfiddle.net/gBQqQ/
Here's the html:
<div id='testtexture'>
<div id='testinside'>
<div style='vertical-align: top;' class='test'></div>
</div>
</div>
And the css:
.test {
width: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
min-height: 130px;
height:auto;
padding-bottom:50px;
background:blue;
}
#testtexture {
width: 100%;
position: relative;
top: 10px;
}
#testinside {
z-index: 3;
background:red;
position:relative;
}
I do not see why there is an issue. I expect either there is something obvious that I am missing, or there is an underlying issue which means I cannot make the red div go above the blue div- maybe because it is a child of the blue div?
Generally not the best idea to have a child div you want to appear behind it's parent. Usually you would take the child div outside the parent to do this. Nonetheless it is possible. Add z-index:-1 to the child div and remove position:relative from the parent.
HTML
<div id='testtexture'>
<div id='testinside'>
<div class="test"></div>
</div>
</div>
CSS
.test {
position: relative;
z-index: -1;
width: 50px;
margin: 0 auto;
height: auto;
min-height: 130px;
padding-bottom: 50px;
background: blue; }
#testinside { background: red; }
See fiddle: http://jsfiddle.net/gBQqQ/1/
If you use firebug, you can see div.test is still there in the correct position behind it's parent. As a side note, the styling vertical-align you had on a div won't do anything.
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