For instance, take the following HTML & CSS:
<div class="fixed"></div>
<div class="wrapper">
<div class="child"></div>
</div>
.fixed {
background: blue;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.wrapper, .child {
position: absolute;
height: 20px;
width: 20px;
padding: 20px;
}
.wrapper {
z-index: 1;
background: red;
}
.child {
position: absolute;
z-index: 3;
background: yellow;
}
Expected behaviour would be that .child displays above .fixed whilst .wrapper is invisible however on http://jsfiddle.net/STLMR/ .fixed shows above all (tested in Chrome + Firefox). Is there some trick to this, or is there some quirk of CSS I'm missing?
In CSS, z-index is not absolute, but relative to the parent container. With "absolute" I'm not referring to the position: absolute attribute, I state this because it might be confusing.
Related: https://stackoverflow.com/a/7490187/671092
You have to move the .child into a new container that has a higher z-index than .fixed.
Related
When I position a fixed div inside of a relative div, and align the fixed div to the bottom of the viewport, then attempt to scroll past the bottom in mobile Safari (iOS 13) I get a strange effect. It looks as though the div becomes obscured by a white rectangle. Is there any way to prevent this behavior without changing the position of the outer or inner divs?
.outer {
position: relative;
z-index: 1;
display: block;
height: 100%;
overflow: auto;
padding: 5px;
}
.inner {
color: white;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background: blue;
}
<html>
<head>
</head>
<body>
<div class="outer">
<div class="inner">
test test test <br/> test test test
</div>
</div>
</body>
</html>
The .inner content goes outside the boundaries of the .outer wrapper.
You'd need to set overflow to visible on the .outer parent to make its content visible outside of its relative parent.
See the result : https://codepen.io/romainpetit/pen/BaNLaZr
Tested.
.outer {
position: relative;
z-index: 1;
display: block;
height: 100%;
overflow: auto;
padding: 5px;
}
.inner {
color: white;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background: blue;
}
Is there a property that allows one element in a div to stack over another element in the same div?
I know with two divs you can use position: relative; & position: absolute; to get this working, but with two elements in the same div I'm not sure what to do.
If you would like to "stack" elements on top of each other, yes you can use the position property.
You would use z-index to alter stack order; the element with the higher z-index would be in front of an element with the lower z-index.
You can see this here, in this fiddle.
.el1 {
height: 100px;
width: 100px;
background: yellow;
position: relative;
z-index: 1;
}
.el2, .el3 {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
background: blue;
z-index: 2;
}
.el3 {
background: green;
z-index: 3;
top: 5px;
left: 5px;
}
<div class="el1">
<div class="el2">el2</div>
<div class="el3">el3</div>
</div>
I have 2 divs in a row (with inline-blocks). One of them has a fixed width and the other one is supposed to automatically fill the left space. How can I do that?
My favorite solution is to use padding on the container block and absolute position on the fixed with object:
.wrapper {
padding-left: 100px;
position: relative;
}
.stay {
width: 100px;
position: absolute;
left: 0;
top: 0;
/* for demo */
height: 50px;
background-color: pink;
}
.fit {
width: 100%;
/* for demo */
height: 50px;
background-color: red;
}
HTML:
<div class="wrapper">
<div class="stay"></div>
<div class="fit"></div>
</div>
I am trying to over lap a div on another div by using css, while background should become blur, like modal pop up show.
But the background of modal pop is still getting displayed through the modal pop up.
As u can see background is visible through the modal pop up!!
I have setted z-index of pop up more than the background
CSS:
.MoreDetails
{
background-color: #000;
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 2.0;
}
My design:
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
Child element cannot be stacked below parent element, even by using z-index.
Use z-index for maintaining stack level of absolute positioned elements that are siblings.
http://jsfiddle.net/TWLgc/
HTML
<div class="wrapper">
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
<div id="tableDetails2" class="tblView2">
</div>
</div>
CSS
.MoreDetails
{
/*background-color: #000;*/
background-color: rgba(0,0,0,0.8);
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
/*opacity: 0.7;*/
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
.tblView2
{
position: fixed;
margin:auto;top:0;bottom:0;left:0;right:0;
z-index: 101;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
The biggest issue is that you're nesting the tableDetails inside the MoreDetails div. Any opacity or z-index you apply to tableDetails will affect MoreDetails. Another approach might be to use the ::before pseudo class on tableDetails and position the two with CSS.
Some other tips:
Don't share id and class names. Using MoreDetails as both an id and
a class may end up breaking things as you progress.
opacity can
only have a value from 0 - 1.
Hope this helps! Good luck!
I want:
<div style="height:100%">
<div style="height:70px;">header</div>
<div style="overflow-y:scroll;">main</div>
<div style="height:60px;">footer, alw. at bottom parent-div</div>
</div>
The real (px) container height may change dep on client window-size,
height of footer and header set in css-theme.
All positioning should be relative. Is JS required to solve this?
(Tried height:auto on main, seem to have no effect.)
You can use absolute positioning to achieve this quite easily, why should it be positioned relative?.
#header, #main, #footer {
left: 0;
right: 0;
position: absolute;
}
#header {
top: 0;
height: 70px;
background-color: yellow;
}
#main {
top: 70px;
bottom: 60px;
background-color: lime;
overflow: auto;
}
#footer {
bottom: 0;
height: 60px;
background-color: red;
}
JSFiddle: http://jsfiddle.net/Tg8g5/