I am having a z-index issue. I have a couple of div that sit on top of each other, within them div there is some content which shows on mouseover. This content is currently being displayed behind the parent div.
The parent div have a z-index: 2 as they need to be displayed above there own parent.
<div class="activity-display"><!--parent div z-index: 2-->
Running<!--This is displayed on hover underneath its parent div, but gets hidden underneath the below activity-display-->
</div>
<div class="activity-display">
Running
</div>
I have tried adding a higher z-index to the anchor and this doesn't solve the issue
Any help would be greatly appreciated
When using the z-index property elements must be positioned. Change the a tag to position:absolute.
You should at least give the elements you want to work with z-index a relative position, because z-index doesn't works on a static position. So really any other than the default position works.
You also don't need to rearrange children or parents elements, because children elements will always be over the parent. In other words, a child element will always have a z-index + 1 relative to the parent.
Please make a fiddle, so that we can help.
Also, some points to keep in mind, z-index works for elements position absolute.
Related
What I have - parent div with several (5) child divs. And few child divs contain text, hence they may change their side and move others inside parent div (in certain volume).
But I need that 4th of child div stays at his place all the time (see picture attached).
I tried to define its position using position:relative for parent and position:absolute for needed div (let's call him - "Object"). But in this situation when the height of other child divs, locating higher than Object, changes, one of them may stay on the content of the "Object" (over it).
Moreover, I found that with position:absolute "Object" started to ignore padding of parent div!
As I see - I need to fix somehow the position of Object in relation with top border of parent div. BUT - margin-top for 4th div doesn't work for it, as it moves the child div #3 above.
I am new to CSS and will be glad if anyone may help me.
// doesn't work as needed:
div#father {position: relative;}
div#son5 {position: absolute;}
initial draft code for parent and child divs at Jfiddle https://jsfiddle.net/741rzafq/2/
If you want to keep the element fixed at its position, you can use position:fixed; for that element. It will remain at its position even if you scroll the page.
I have put my code into codepen to easy display my problem :
https://codepen.io/anon/pen/wrVMPy
<div class="card">
<div class="front">
<h1>03</h1>
</div>
<div class="back">
<p>test</p>
</div>
</div>
(needed to be able to post codepen link for some reason)
So, my problem is that the back of the "card", which has position absolute, wont display relative to my viewport. it locks to the bootstrap column instead. i want the red box to always show up right in the middle of the screen when the "card" is clicked but it seems impossible.
Not even position fixed takes it out from the flow and adjust it relative to the main div or viewport.
And also with a z-index of 99 it still doesn't go over the rest of the elements.
I would be too grateful if anyone has an solution to this. Thank you in advance.
That's because position: absolute positions the element relative to the first non-static positioned element. In order to make it positioned relative to the viewport you need to use position: fixed instead.
Im trying to horizontally center this button to match the attached image.
I have it posted here
http://danux.me/
It does come after an absolutely positioned item with a z-index of 2. I am awful at the idea of positioning and surprised having those tiles overlap the blue bar worked, however, I'm not sure why the button won't appear below it.
The tiles also have an interaction in it (also surprised I could get this to work too after swiping the code) so maybe that has something to do with it?
Any guesses?
Put it inside a container with clear: both. This is called a clearfix.
<div style="clear: both">
</div>
I couldn't find the absolutely positioned element you're referring to. #home_console_wrapper has position: relative. You definitely want relative, not absolute, since giving an element position: absolute makes it float on top of other elements instead of pushing them down.
I have a table with some data but I want to use one cell for displaying more divs. Each of divs has different exact width and position from the left.
I tried it with position:relative but position of each next div depends on the divs on the left and I don't want that I want each div in that cell to be exactly x pixels from left of the cell border.
I also tried position:absolute but this does go really to the <html> tag as they write here http://www.w3schools.com/css/css_positioning.asp:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Now I'm not sure how to solve my problem.
My example: http://jsfiddle.net/6wSAJ/465/
(Made from accepted answer from here: Relative positioning of two divs)
Edit: I guess I forgot to mention that I need it to work in IE8.
Edit 2: http://jsfiddle.net/6wSAJ/468/ The problem I was dealing with is that if I set the cell relative it completely ruins my real problem table so I have to make divs with relative position around the divs I want to be positioned absolutely. I didn't do that at first cause I always want to try to style the elements I have and add new ones only if really necessary.
You should make the wrapping divs a relative position so the absolute position will apply on inner elements:
position: relative;
jsFiddle Demo
Note that you can't give a table-cell a relative position for it's not standardized and will work unexpectedly.
For further reading:
position - CSS | MDN
Learn CSS Positioning in Ten Steps
I have a div with position relative and z-index :-1. and I have placed <A> over that
div. But it seems <a> is not working when i give postion :relative to its parent. when change that
position to absolute it starts working. Could anybody tell me why this is happening.
I want that link to work and as far as possible need to keep its parent div
position :relative
and z-index:-1;
position:relative will make the z-index relative to the parent.
http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
Negative z-index cause a links to not work:
See this fiddle