This question already has answers here:
z-index not working with fixed positioning
(8 answers)
Closed 5 years ago.
Why z-index property isn't working with element with position absolute, if this element has parent that has position fixed?
I make simple example for this case
HTML:
<div id='q1'>
<div id='q2'></div>
</div>
CSS:
#q1 {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 0;
}
#q2 {
position: absolute;
top: 80%;
border: 2px solid black;
width: 100px;
height: 30px;
background-color: green;
z-index: -1;
}
It can't be done like that because z-index is relative to the elements of same stack and in your case you want the z-index of child to be lower than that of parent.
By the way if you don't make #q2 a child of #q1, it will work like charm.
Hope this help
It has nothing to do with the position property, it's because q2 is nested inside q1
Related
This question already has answers here:
How position absolute and fixed block elements get their dimension?
(2 answers)
Closed 2 years ago.
I have a parent named "container" of size 300px x 120px that encapsulates 2 s namely "redbox" and "greenbox". when I add "position: relative" to the "container" size of child <div>s looks proportionate. however on removing the attribute size of div increases 3 times".
to my knowledge position is for positioning of elements how can it effect the size of the element.
#container {
width: 300px;
height: 120px;
/*position: relative;*/
border: solid 1px blue;
}
#redbox,
#greenbox {
border: solid 1px;
width: 60%;
height: 60%;
position: absolute;
}
#redbox {
background-color: red;
left: 0px;
top: 0px;
}
#greenbox {
background-color: rgb(21, 255, 0);
left: 30px;
top: 30px;
opacity: 50%;
}
<head></head>
<body>
<div id="container">
<div id="redbox"></div>
<div id="greenbox"></div>
</div>
</body>
The reason this is happening is because you are using percentages for your width and height. Absolute positioning is relative to the nearest parent that has position: relative If nothing qualifies for that, the parent is the <body> element.
When you set position: relative on the #container, you are changing the size of the relative parent to the red and green boxes. And since you are using percentages, the size of the red and green boxes change accordingly.
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 4 years ago.
I have a div (the parent) and another div in the parent (the child) and I want to hide the child behind the parent.
edit : I will try to explain better, so i speak about the z axis but if i do something like :
.parent {
z-index: 10;
}
.child {
z-index: 0;
}
it's not working. So i ask you the question : how my child can be under my parent on the z axis ?
.parent {
width: 200px; height: 200px;
background-color: red;
}
.child {
width: 100px; height: 100px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
</div>
If you will use z-index.
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
.parent {
background-color: red;
height:100px;
width:100px;
}
.child {
background-color: blue;
height:50px;
width:50px;
position:relative;
z-index: -1;
}
<div class="parent">
<div class="child"></div>
</div>
Try again with position: relative;
davecar21 beat me to it, but basically the child needs to be position: relative with z-index: -1.
However, I would like to add that positioning the child behind its parent feels like an antipattern. To me, z-indexing represents layering between siblings, so if possible, I would recommend restructuring your approach such that the parent-child elements are actually adjacent siblings, perhaps nested in some containing element.
This question already has answers here:
Why is a div with "position: absolute" not by default relative to the document?
(3 answers)
How does the CSS position on a div affects position of sibling division?
(2 answers)
Closed 4 years ago.
I have 2 elements in the container, one relative and one absolute. I centered them both as well using margin: auto. The first element is relatively positioned, so it doesn't move, which I understand.
However, for the second element, it being absolutely positioned, shouldn't it move to the top-left corner of the container? I thought it removed the element from the flow of the document and moved relative to the parent element, which is .container , so I'm confused why it's being positioned under the first element.
I read the mdn docs for this...but perhaps I am not understanding the wording?
Essentially, I thought my second box would fit on the same row as the first box, just in the corner, on the left.
html, body {
height: 100%;
width: 100%;
}
.container {
height: 500px;
width: 500px;
border: 1px solid black;
position: relative;
}
.box1 {
height: 100px;
width: 100px;
background: blue;
position: relative;
margin: auto;
}
.box2 {
height: 100px;
width: 100px;
background: red;
position: absolute;
margin: auto;
}
<div class='container'>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
This question already has answers here:
Element not moving from top
(2 answers)
Closed 6 years ago.
body {
background: #8E2800;
}
#main {
background: purple;
position: relative;
color: white;
}
#title {
background: grey;
position: absolute;
top: 50%;
left: 50%;
height: 40%;
width: 50%;
}
<div>
<div id="main">
<div id="title">
<h2>Weather Forecast</h2>
</div>
</div>
</div>
Also as working demo can be found on codepen:
http://codepen.io/manzur/pen/RomyjK?editors=1100
position: absolute positions with respect to the edges of the nearest positioned ancestor.
#main has position: relative so it is the element that #title is positioned with respect to.
#main has no content which is in normal flow (the only content is absolutely positioned) and it has a height of auto (the default). The computed height is therefore 0.
50% of 0 is 0.
You need to either position with respect to something else (e.g. the viewport by removing position: relative from #main) or give #main some height (by adding content or using the height property).
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 9 years ago.
In HTML,When you use the position:absolute css property in child block the absolute value is not taken from parent tag it refer from whole browser window.
the sample code is shown below..
CSS
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
}
.child {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
If you want the arrange the child with in the parent block just add position:relative in the parent CSS
The parent block needs to be have position set to a non-static value, that is:
position: absolute, position: fixed or position: relative.
The value you need depends on the layout application.
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
position:relative;/*this makes all my children s position relative to me */
}
.child {
position: absolute;/* i have an absolute position and i am relative to my parent*/
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
Demo: http://jsfiddle.net/pGvvq/
markup:
<section class=parent>
this makes all my children s position relative to me
<article class=child>
i have an absolute position and i am relative to my parent
</article>
</section>
READ more http://css-tricks.com/absolute-positioning-inside-relative-positioning/