This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 1 year ago.
Playing with the z-index of rel and rel1 will change the stacking position, but the fx will never be on top of them even with a higher z-index, unless is moved on top of the rels on DOM. Why is this happening ?
.fx {
position: fixed;
height: 30px;
width: 30px;
background-color: pink;
margin-top: 60px;
margin-left: 30px;
z-index: 10000;
}
.rel {
z-index: 7;
position: relative;
height: 500px;
width: 200px;
background-color: red;
margin-top: 30px;
}
.rel1 {
z-index: 6;
position: relative;
height: 500px;
width: 100px;
background-color: black;
margin-top: -300px;
}
<div class="rel">
</div>
<div class="rel1">
</div>
<div class="fx">
</div>
As mdn says about position: fixed:
Its final position is determined by the values of top, right, bottom,
and left.
So your code would look like this:
.fx {
position: fixed;
height: 30px;
width: 30px;
background-color: pink;
margin-top: 60px;
margin-left: 30px;
z-index: 10000;
top: 20px;
left: 10px;
}
.rel {
z-index: 7;
position: relative;
height: 500px;
width: 200px;
background-color: red;
margin-top: 30px;
}
.rel1 {
z-index: 6;
position: relative;
height: 500px;
width: 100px;
background-color: black;
margin-top: -300px;
}
<div class="rel">
</div>
<div class="rel1">
</div>
<div class="fx">
</div>
It does follow the stack rules but it's position is not set yet ,you have to set the position to top: 0px;
You need to give .fx position attributes:
Usually a combination of either top or bottom plus either left or right.
Working Example:
.fx {
position: fixed;
top: 0;
left: 0;
height: 30px;
width: 30px;
background-color: pink;
margin-top: 60px;
margin-left: 30px;
z-index: 10000;
}
.rel {
z-index: 7;
position: relative;
height: 500px;
width: 200px;
background-color: red;
margin-top: 30px;
}
.rel1 {
z-index: 6;
position: relative;
height: 500px;
width: 100px;
background-color: black;
margin-top: -300px;
}
<div class="rel">
</div>
<div class="rel1">
</div>
<div class="fx">
</div>
Related
I will show you a simple example related to my task.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<html>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
</html>
As you can see in the above example, there are 2 fixed divs and there is 1 relative div in the first fixed div.
And I am going to show 1 absolute div in the relative div. but it is hidden by the second fixed div.
How to show the whole absolute div without any hidden part.
Just replace your blocks in HTML.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
z-index: 1000;
}
<html>
<div class="fixed2">
fixed1
</div>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
</html>
There are multiple ways of doing this
Move div.fixed1 below div.fixed2
(or)
You can increase the z-index of div.fixed1
.fixed1 {
z-index: 1;
}
Use the property z-index, so you will specify that div.fixed1 is in front of div.fixed2:
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
z-index: 1;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
I am trying to put a div at the centre . Thats works well but it is not visible on the lower div. i.e the lower div hides the content of the center div. My html code :
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 2;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Few things:
You don't have to use z-index for all the div's, if you want a specific div to be in front then just give z-index to that.
Since you already using div in your code, the div will sit beneath another be default and in your case layer-1 you want that to be in the front, so just use the z-index only for that and remove for others.
The higher the z-index value it display up-front.(in my code it is simple z-index:1`.)
.outerWrap {
position: relative;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
You got your z-index backwards. put layer1 at 2 and layer2 at 1
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 1;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Please look at the following fiddle:
https://jsfiddle.net/a9ravkf5/3/
#navbar{
position: fixed;
top: 0;
left: 0;
height:40px;
background-color: grey;
width: 100%;
}
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 0;
height:100%;
width: 200px;
background-color: black;
}
#dropdown{
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 300px;
background-color: green;
}
<div id="navbar">
</div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content">
</div>
I want to make the blue element larger (wider) than the fixed position parent element. It is going to be a dropdown for selecting option inside the sidebar, and i want it to expand the the content inside and not wrap to multiple lines (larger height).
What is the best solution for doing this?
Your child div is larger than the containing fixed div.
The reason you can't see all of it is because your #content div is shown in front of your fixed #sidebar div.
Try adding a z-index to the #sidebar and #content divs like so:
#sidebar {
position: fixed;
top: 40px;
left: 0;
z-index: 0;
height: 100%;
width: 200px;
background-color: black;
z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content.
}
#content {
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 300px;
background-color: green;
z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar.
}
#navbar {
position: fixed;
top: 0;
left: 0;
height: 40px;
background-color: grey;
width: 100%;
}
#dropdown {
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
<div id="navbar"></div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content"></div>
Is this what you need?
You need to set appropriate z-index on your content div and sidebar.
#navbar{
position: fixed;
top: 0;
left: 0;
height:40px;
background-color: grey;
width: 100%;
}
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 10;
height:100%;
width: 200px;
background-color: black;
}
#dropdown{
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
z-index: 0;
min-height: 300px;
background-color: green;
}
<div id="navbar">
</div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content">
</div>
you need to set two things
one is your 'z-index', in #sidebar .
and another one is 'min-height' in #content.
like
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 10;
height:100%;
width: 200px;
background-color: black;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 400px;
background-color: green;
}
and if you want to fix it then also add z-index:-1; in #content
I am trying to make nested divs, so I can position children with top and left, so they can overlap each other:
https://jsfiddle.net/e0cpuarv/
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
It works with one huge drawback - children just are on the top of parent. What should I do to make them be inside parent, like this?
desiredresult
In fact, children may be not DIVs, IMGs will be enough too, if this helps
try this one:
body{margin:0px;padding:0px;}
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 40px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 30px;
background-color: blue;
}
DEMO HERE
Change this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
to this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
Here is the JSFiddle demo
Basically you add overflow:hidden to the parent element .boo :)
just make the main div (.boo) position: relative
see the code, and change the left and top values for kah1 and kah2 to position the inner boxes
.boo {
position: relative;
margin-left: 10px;
margin-top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
right: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
You can hide the overwflow with overflow: hidden, so in your case the css would be like this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
I'm try to do a special navigation-bar.
I will show it in pictures:
this on scrollbar on top
and this on scrollbar down:
So I tried to do header with position: fixed and z-index: 1.
inside nav with z-index high(1000) and
the right block with z-index high(1000)
and the content have z-index: 2 and position: relative.
and it didn't worked :/
**and important thing is that I need the upload div will be in the header
and will be higher (in z-index) from content
I will try to show you in code:
header {
display: block;
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
z-index: 1;
background-color: blue;
}
nav {
width: 100%;
height: 40px;
background-color: green;
z-index: 1000;
}
#upload {
background-color: green;
height: 40px;
width: 40px;
float: right;
margin-right: 0;
z-index: 1000;
}
#content {
position: realative;
display: block;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 80%;
background-color: #cacaca;
z-index: 2;
}
<header>
<nav></nav>
<div id="upload">
</div>
</header>
<div id="content">
</div>
thank you,and I'm sorry about my english !!
you will need to move the nav out of the header for the #content z-index to work and need to align nav with fixed positioning or by giving margin
header {
display: block;
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 80px;
background-color: blue;
z-index: 1;
}
nav {
width: 100%;
height: 40px;
z-index: 3;
background-color: green;
position: fixed;
top: 0;
right: 0;
left: 0;
}
#upload {
background-color: green;
height: 40px;
width: 40px;
float: right;
margin-right: 0;
margin-top: 40px;
}
#content {
position: relative;
display: block;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 80%;
background-color: #cacaca;
z-index: 2;
}
<header></header>
<nav>
<div id="upload"></div>
</nav>
<div id="content"></div>