I have a navigation div fixed to the top of the screen, at the top of my page I have a div that takes up the whole screen.
I made the nav div have a z-index of -1, and my div at the top have a z-index of 1. So My nav goes under the div. But then when you scroll down I have another div with a z-index of -2, but my nav still goes under it. Can anyone tell me how to make a fixed nav go under the first element and go over the second?
Hope I made it clear what I was asking and my explanation.
The problem is related to how the stacking of your elements is calculated.
You just need to add position: relative to the div that you want to go under.
With this basic HTML:
<div id="nav"></div>
<div id="top"></div>
<div id="next"></div>
<div id="bottom"></div>
And this basic CSS:
#nav {
height: 100px;
width:100%;
background: red;
z-index: -1;
position:fixed;
}
#top {
height: 400px;
width:100%;
background: white;
z-index: 1;
}
#next {
position: relative;
height: 100px;
width:100%;
background: blue;
z-index: -2;
}
#bottom {
height: 400px;
width:100%;
background: blue;
z-index: -2;
}
Here is the JSFiddle
You can solve this problem be adding a inner div with in your nav and add position:relative to that div and it will work perfect
setting the position:relative will solve the problem because z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
Related
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
No matter what I try, the child div is always in front of the parent. Is there a way to make the child div in back of the parent? z-index doesn't seem to work.
Notes :
I don't want to change the html
parent must have a z-index
duplicate "How to make child element upper than parent with z-index" doesn't make grammatical sense and is hard to read, and didn't really help me.
<div id='parent'>
<div id='child'>
</div>
</div>
#parent {
width:50px;
height:50px;
background:red;
position:absolute;
z-index:100;
}
#child {
width:50px;
height:50px;
background:blue;
position:absolute;
z-index:-100;
}
JSFiddle
Don't make the child div actually contained in the parent. Since the positions are absolute you can do this:
<div id='parent'>
</div>
<div id='child'>
</div>
Now if the z-index of parent is less than that of child it will appear on top.
You can't achieve that because they are part of the same stacking context. However a workaround could be set opacity: 0 to child
#parent {
width: 50px;
height: 50px;
background: red;
position: absolute;
z-index: 1;
}
#child {
width: 50px;
height: 50px;
background: blue;
position: absolute;
z-index: 2;
opacity: 0;
}
<div id='parent'>
<div id='child'></div>
</div>
AFAIK it's not possible to position a parent on top of a child. Without changing the HTML you can however use:before or :after to create a new element and position that on top of the child;
#parent:after {
background: red;
content: "ON TOP";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
http://jsfiddle.net/j6e9qho3/12/
Edit: Or seeing as the effect of the parent being on top of the child is that the child isn't visible at all, the easiest thing to do is probably #child {display: none}. But I assume that doesn't work for you for other reasons.
Perhaps if you explained what you want to accomplish we could be of more help.
I was able to achieve what I wanted by dealing with siblings inside the parent...
<div id='parent'>
<div id='child1'>
</div>
<div id='child2'>
</div>
</div>
where parent is a transparent container with its own z-index, but the children are the actual color squares that are drawn (each with their own z-index).
I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.
This must be done without changing the html.
e.g.
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
h1's bottom should be 100px below #container's top.
Thanks a lot
EDIT:
So by Request what I did (or didn't) tried:
Searching with Google for css bottom top position relative but that's not the best search terms in the world...
Normally I would put a container around h1 and give it a height of 100px but then I would need to change the html and that I can't
using bottom: somevalue but that positions the element's bottom relative to the container's bottom.
slain some vampires
You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.
#container {
width: 200px;
height: 200px;
background: tan;
overflow: hidden;
}
#container h1 {
transform: translateY(-100%);
margin-top: 100px;
background: papayawhip
}
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
Depending on browser support requirements:
#container {
position: relative;
}
#container h1 {
position: absolute;
bottom: calc(100% - 100px);
}
Example
Only way through it is to add a height to the h1 unless you want to go with calc which isn't supported yet by some browsers. Then set your top margin to be top: 100px - h1's height. Hope this works
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
#container {
width: 300px;
height: 300px;
background: #222;
overflow: hidden;
}
#container h1 {
background: #444;
position:relative;
height:80px;
top:20px;
}
http://jsfiddle.net/ms889w57/
#container
{
position: absolute;
height: 100px;
bottom:0px;
}
This code is not affecting html at all. I added css for id-container.
An absolute position element is positioned relative to the first parent element that has a position other than static. You can change it to fixed it you wants to.
Height of the container, help you to calculate spacing from bottom.
I have the following layout:
On the left side I have a menu and big gray part on the right side is the body content. The problem is on the left menu I have a bunch of buttons. I want this menu to be fixed position and body scrollable. I Have the following css:
#menu {
position: fixed;
}
#content {
position: inherit;
margin-left:300px;
}
The problem is that on the red part of my menu all button unavailable, I can't click on it. looks like body overrides the menu.
Any ideas what the problem might be?
Thanks
Including the html would give a better sense of the stacking order and likely yield a better answer. Given what you've provided, this should fix:
#menu {
position: fixed;
z-index: 1;
}
In order to fix it to the top and not scroll, you don't use position: fixed;. You need to use position: absolute;. If you don't want it at the very top, then you use position: relative; and place it inside an element.
Then, in order to scroll, you use position: fixed;.
When you use position: fixed, it places the element fixed within the visible page.
However, when you use position: absolute, what this does is put it on an absolute position on the page regardless of scroll. For example, if you added the css top:0; then it would be 0 pixes from the absolute top of page, and if you scroll down it will disappear from view because it is all the way at the top of the actual page, not just the top of the visible page.
I understand it seems a bit counter-intuitive to you. However, you can see it working in the jsbin below.
Working jsbin:
http://jsbin.com/Uwuyuha/1
page.html
<body>
<div id="container">
<div id="menu">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</div>
<div id="content">
</div>
</div>
</body>
style.css
body {
width: 100%;
height: 100%;
}
#container {
width: 1000px;
height: 1000px;
}
#menu {
width: 250px;
height: 2000px;
position: fixed;
background: #999;
}
#content {
width: 650px;
height: 300px;
position: absolute;
margin-left: 251px;
background: #444;
}
I got two divs. The second div should be on first div, so... When clicking at menu buttons in first div, there should appear second div on first div (the second div covers the first one). I created the second div under first one, gave to it relative position, and took it up to first one. But there is a problem. There is an overflow, cause the div is long, and div's height saved at bottom. How to do this thing without any problems?
HTML
<div class='wrapper'>
<div class='firstDiv'></div>
<div class='secondDiv'></div>
</div>
CSS
.wrapper{
position: relative;
}
.firstDiv, .secondDiv{
position: absolute;
}
HTML
<div class="one">
<div class="two"></div>
</div>
Css :-
.one
{
width: 170px;
height: 170px;
position: relative;
background: red;
}
.two
{
width: 70px;
height: 70px;
position: absolute;
background: black;
}
jsfiddle demo
http://jsfiddle.net/xnqsF/
Real answer available via css-grid,
setting the parent to display:grid
and the children to grid-row/column-start:1 as shown in the answer below
https://stackoverflow.com/a/50086485/3810321