This question already has answers here:
css z-index issue with nested elements
(2 answers)
I have position but z index is not working
(1 answer)
Lower z-indexed parent's child upon higher z-indexed element?
(2 answers)
Closed 4 years ago.
I have a problem with positioning, I'd like to put the .sibling-child over .parent without modifying the current z-index. Is there a way to do this in CSS?
Here the jsfiddle with the problem. http://jsfiddle.net/8hb6xgLj/1/
.parent {
width: 300px;
height: 100px;
background: #333;
position: relative;
z-index: 10;
}
.child {
top: 60px;
position: absolute;
width: 50px;
height: 80px;
background: red;
}
.sibling {
width: 300px;
height: 100px;
background: #ccc;
position: relative;
z-index: 9;
}
.sibling-child {
top: 10px;
position: absolute;
width: 70px;
height: 80px;
background: blue;
}
<div class="parent">
<div class="child">
</div>
</div>
<div class="sibling">
<div class="sibling-child">
</div>
</div>
In your example, both div elements are positioned with different z-index, This means they are stacked in the order they appear in the markup, with the first declared element having the highest stacking index.
Therefore, according to that definition, there is no chance that .sibling-child will appear above .parent.
See the W3C specification on stacking context for more information. Note point 9 in particular:
Stacking contexts formed by positioned descendants with z-indices
greater than or equal to 1 in z-index order (smallest first) then tree
order.
This is the only thing I can think of.
transform: translate3d(0, -100px, 20px);
.parent {
width: 300px;
height: 100px;
background: #333;
position: relative;
z-index: 10;
}
.child {
top: 60px;
position: absolute;
width: 50px;
height: 80px;
background: red;
}
.sibling {
width: 300px;
height: 100px;
background: #ccc;
position: relative;
z-index: 9;
}
.sibling-child {
top: 10px;
position: absolute;
width: 70px;
height: 80px;
background: blue;
transform: translate3d(0, -100px, 20px);
}
<div class="parent">
<div class="child">
</div>
</div>
<div class="sibling">
<div class="sibling-child">
</div>
</div>
Related
I have a div, which has an image inside another div. I would like to place the inner div over the second div. So the arrow in the image below should go over the red. Is this possible?
.puscicaAnimacija {
bottom: -2%;
height: 5%;
margin-bottom: -10px;
z-index: 2;
position: absolute;
}
<div class="first">
<div style="display: flex; justify-content: center;">
<img src="https://via.placeholder.com/100" class="puscicaAnimacija" />
</div>
</div>
<div class="second">
</div>
You should put position:relative on the second div that refers to the .puscicaAnimacija class, then using the property z-index on the second element with an higher value than in the first.
.puscicaAnimacija{
position: relative;
}
.second{
position: absolute;
z-index: 3;
}
Note:
I've converted a few of your classNames to use named classes as well as added some additional CSS for demonstration purposes
Perhaps try something like this:
.first {
background: navy;
width: 300px;
height: 100px;
position: relative;
}
.ontop {
background: whitesmoke;
width: 300px;
height: 50px;
position: absolute;
bottom: 0;
}
.second {
background: red;
width: 300px;
height: 50px;
}
.puscicaAnimacija {
bottom: -40%;
left: 10%;
height: 48px;
position: absolute;
}
<div class="first">
<div class="ontop">
<img src="https://cdn-icons-png.flaticon.com/512/159/159119.png" class="puscicaAnimacija" />
</div>
</div>
<div class="second">
</div>
In order to use z-index the parent element must be positioned. Use position:relative on the div you want to go under.
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
Closed 2 years ago.
I'm trying to do that when a button is pressed, it will display a div in the middle of the page no matter where my page is, it can be on the bottom part or top part of the page and still it would be in the middle.
I'm using position: absolute because I need it to be 'floating' above other elements.
I searched everywhere and didn't see how to do it. Only in the middle, but not 'dynamically'.
Also, how can I make the rest of the page that is behind the div disabled?
my current css:
#buyComponentTesting{
background-color: blue;
z-index: 99;
width: 200px;
height: 200px;
position: absolute;
top: 26%;
left: 40%;
}
As already suggested, it should be position:fixed instead of position:absolute. Please avoid other CSS written for demo.
.page{
pointer-events:none;//page disabled
/*Not required for this solution*/
width:100%;
height:100%;
/*Not required for this solution*/
}
#buyComponentTesting{
position:fixed;
width:100px;
height:100px;
top:calc(50% - 50px);
left:calc(50% - 50px);
pointer-events:all; /*but the div is accessible*/
/*Not required for this solution*/
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid transparent;
background:beige;
cursor:pointer;
/*Not required for this solution*/
}
#buyComponentTesting:hover{
border-color:#333;
}
<div class="page">
<div id="buyComponentTesting">The DIV</div>
</div>
#buyComponentTesting{
background-color: blue;
z-index: 99;
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%);
}
The code above will center the div. top and left will move the upper right corner of the div to the center of the page but to actually have the div sit in the center we would need to move if left by its width / 2 and up by its height / 2 which is done with transform property.
Also you cloud center the div horizontally use left: 50%; transform: translateX(-50%);
Note: Code above has position: fixed to have the div appear even when scrolling.
To have the rest of the page "disabled" as You mentioned, one option would be to create an overlay with fixed or absolute position which will sit above all element except for the div. You can either use ::before selector or separate element to create overlay
div::before, .overlay{
content: ""; //Add this property only when using ::before or ::after, otherwise they won't be displayed
position: fixed;
top: 0;
left: 0;
z-index: 80; /*Less then z-index of the div*/
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
}
#buyComponentTesting{
background-color: blue;
z-index: 999;
width: 200px;
height: 200px;
position: relative;
margin : auto;
transform: translate(-50%, -50%);
}
Please try the above code share your feedback
Use position: fixed; instead of position: absolute;.
From below code, this is will be show in the middle.
#buyComponentTesting {
background-color: blue;
z-index: 999;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
But If you want to create like popup than use this
.container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
background: rgba(0, 0, 0, 0.3);
}
#buyComponentTesting {
background-color: blue;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div id="buyComponentTesting">
</div>
</div>
I think, it will be helpful for you.
I've created a notice as in the pictures
But some extensions will appear above this notification
this css for notice
display: block;
position:fixed;
for "online" css
display:inline-block;
It could be those other elements also have position:fixed on them. One solution is to use z-index and set it higher than the other element
As you haven't supplied any sample html/css for us to duplicate this issue, I'm going to use some generic HTML:
div:first-of-type {
background: red;
width: 100vw;
height: 100vh;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: blue;
}
.fixed.green {
background: green;
left: 20px;
top: 20px;
}
<div>Some content</div>
<div class="fixed green">Fixed element</div>
<div class="fixed">Another fixed element</div>
As you can see, the green div is under the blue one. This will represent your notification.
By adding z-index:5; to the green div (in this example any value greater than 1 will work) the green div will appear at a higher level than the blue div and become visible:
div:first-of-type {
background: red;
width: 100vw;
height: 100vh;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: blue;
}
.fixed.green {
background: green;
z-index: 5;
left: 20px;
top: 20px;
}
<div>Some content</div>
<div class="fixed green">Fixed element</div>
<div class="fixed">Another fixed element</div>
The maximum value for z-index varies by browser but generally is in the millions. Feel free to set the notification z-index to 9999 or some other super-high value.
I have the following layout: http://jsfiddle.net/yHPTv/2487/
What I need to do is hide the .hidden class to the right edge of the .block class and have it only appear (by sliding in) on hover to the current position you see it in the JSFiddle.
The issue is, the .hidden class is of variable-width, meaning that the content inside it (ABCDEFGHIJKL) can be completely different, sometimes shorter, sometimes longer.
How would I solve this?
Edit: To clarify what I mean by hiding it to the right edge of the .block class, I mean like this, except it wouldn't be shown.
HTML:
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
CSS:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
}
To solve my own question, I simply removed right: 0 from .block .hidden and put left: 100%.
http://jsfiddle.net/yHPTv/2488
HTML:
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
CSS:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
}
I have 3 elements, two on the same level, and one child, all having fixed position. I need to set the z-index properties to place the parent on the bottom, the element on the same level in the middle, and the child on top.
I've tried setting a higher z-index for the child, but it's not working.
<div class="red">
<div class="blue"></div>
</div>
<div class="green"></div>
Here is the case http://jsfiddle.net/udENm/21/ (I need red on the bottom, green in the middle and blue on top, still maintaining red and greenon the same level).
My CSS is like this
.red {
position: fixed;
z-index: 2;
}
.green {
position: fixed;
z-index: 2;
}
.blue {
position: fixed;
z-index: 5;
}
Set your positioning to absolute and remove the z-index from the parent div (the red one) entirely. http://jsfiddle.net/calder12/udENm/32/
.foo {
background: red;
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: absolute;
left: 40px;
top: 40px;
z-index: 5;
width: 50px;
height: 50px;
}
The z-index property only has effect within the stacking context of the containing element.
Put another way, given a bunch of block elements within the same parent element, you can control their front to back ordering pretty easily. However, z-index can only control the front to back ordering within this parent element and not within the global context.
So, you can move .blue backwards and forwards within .red all you like. You can also switch .red and .green around in the z-plane all you like too. However, you can't put .green between .red and .blue because they are in different stacking contexts.
EDIT
Stacking context only applies to elements that are in the flow. If you use position:absolute, then you can do this. See Rick Calder's answer
The green blocks z-index needs to be lower than the red ones. I used this CSS instead of the one you posted:
.foo {
background: red;
position: fixed;
left: 50px;
top: 50px;
z-index: 2;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: fixed;
left: 100px;
top: 100px;
z-index: 1;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: absolute;
top:50%;
left:50%;
z-index: 5;
width: 50px;
height: 50px;
}
Works fine, as you can see green is now z-index 1, red is z-index 2 and the blue block has absolute positioning.
Z-index is relative in a way to the parent. Red is already at 2, and blue is only at z-index 5 compared to it's siblings, but not to outside elements like Green.
Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.
Kinda like this?
http://jsfiddle.net/kBv7R/
HTML
<div class="foo">
<div class="child"></div>
<div class="bar"></div>
</div>
CSS
.foo {
background: red;
position: fixed;
left: 50px;
top: 50px;
z-index: 2;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: fixed;
left: 100px;
top: 100px;
z-index: 5;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: fixed;
left: 90px;
top: 90px;
z-index: 6;
width: 50px;
height: 50px;
}