Image being drawn under a button despite z-index and position relative

Question

I'm using html and jquery to position an img into another container. Now I've run into the problem that is similar to this one: set Z index not working. button behind a container (HTML - CSS)

The only problem there is: The solution mentioned there does not work. The image I have is still shown to be UNDEr the button (which is an input field of type submit and one of type reset).

The image itself has z-index 2400 while the two buttons (and also the parent of the buttons) have position: relative and z-index of 1.

Now my question is what further optins are availble there?

As additional info as requested (the pictures are all 20 x 20 px)

var x = (pictureToWhichToPlace.left + 20).toString() + "px";
var y = (pictureToWhichToPlace.top + 20).toString() + "px";

$(document).find(".myInsertImageContainer").first().appendTo($(document).find(".subimg").first().parent());
$(document).find(".myInsertImageContainer").first().css({
    'top': y, 'left': x,  'width': 24, 'height': 24, 'z-index': 2300, 'position': 'absolute'
});

    $(document).find(".subimg").first().parent().css({ 
        'z-index': 2200, 'position': 'relative'
    });

The position I'm inserting it in is a div which has multiple images within:

<div>
    <img class = "subimg" />
    <img class = "subimg" />
    <img class = "subimg" />
</div>

<div style="z-index: 1; position: relative">
    <input type="submit"> value="mysubmit" />
</div>

<div class="myInsertImageContainer">
    <img class = "myInsertImage" style="z-index: 2500; width:20;height:20 "/>
</div>

As mentioned in a comment the whole page is part of a nintex form so I put together the above to be as near to the original situation as possible without posting 10 pages of text.

Can you show some of your css? But in general, to make this effect, I would make the parent container of your elements have position:'relative', and all child elements have position:'absolute'. But, whithout some code, I can know if this is the case. — Renan Ferreira, Dec 11 '14 at 10:24
It is very difficult for us to debug this and help you without seeing code. I would guess that this is still a z-index issue and most likely a stacking context/stacking order issue. check out this article: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ — lee_gladding, Dec 11 '14 at 10:26
The code is a bit complicated to show as its a sharepoint page / nintext form (thus quite a bit of css,... code ). but else: The container where I move the img into does not have position explicitely stated. The image itself has position absolute (I made sure of that manually). The buttons and the container of the buttons I tested with position relative in both — Thomas, Dec 11 '14 at 10:27
an absolute positioned element will be in the stacking context of its closest positioned (any other than static) parent container — lee_gladding, Dec 11 '14 at 10:30
Have you tried using position absolute in booth the buttons and the image? As lee_gladding said, elements with position absolute will be positioned relative to the closest parent not static. If you set the parent as position relative, that's the case you need. Mixing position relative and absolute for the child elements doesn't seem to be the solution. — Renan Ferreira, Dec 11 '14 at 10:43
@RenanLopesFerreira I updated the question as much as possible there. Tested to put the container of the button also to position: relative and z-index: 1 but didn't have any effect. — Thomas, Dec 11 '14 at 10:48
How do you want the elements to be positioned? The image to be above the buttons, hidding them? — Renan Ferreira, Dec 11 '14 at 10:58
Exactly yes I want the moved image to be shown above ALL other elements ( on another note: from testing around I also saw its not only the buttons even if another div is before the image div and contains a textfield the moved image is shown UNDEr that field). In effect the image is moved there on a mouseover of one of the pics in the div and invisible again if mouseout triggers (but omitted that codepart as it doesnt have much to do with the displaying prob itself). — Thomas, Dec 11 '14 at 11:01
Interestingly a solution was found by one of my collegues......if the z-index for the div containing the button is set to below 100 it works. Can it be that somehow as the image is moved the z-index of one of its parents overwrites the z-index of the image (inside the div where its placed the z-index is taken of the moved element, but for outside of the div the z-index of one of the parents taken)? — Thomas, Dec 11 '14 at 12:19
thus can it be that inside the element wehre the z-index element is placed its own z-index is taken while outside of the element the z-index of the parent is taken? — Thomas, Dec 11 '14 at 12:20

score 0 · Accepted Answer · answered Dec 12 '14 at 01:48

I really don't know if this is what you are looking for, but, as mentioned in the comments, you need to set the parent of all the elements as position:relative. The buttons and the images should have the property position:absolute, so they will positioned relative to the parent div. This way, the z-index will work.

In the example bellow, the button is placed bellow the image. If you set his z-index to 3, it will be placed above the image.

#container{
    position: relative;
}
.buttons{
    position: absolute;
    z-index:1;
}
.myInsertImage{
    position: absolute;
    z-index:2;
}

<div id="container">
    <div>
        <img class = "subimg" />
        <img class = "subimg" />
        <img class = "subimg" />
    </div>
    
    <div class="buttons" >
        <input type="submit" value="mysubmit" />
    </div>
    
    <div class="myInsertImageContainer">
        <img src="http://4.bp.blogspot.com/-2exPcbRhYtA/UQNlZELLW8I/AAAAAAAAW80/xE4EeqWUyts/s1600/js.png" width="100px" height="100px" class = "myInsertImage" />
    </div>
</div>

If this is not what you are looking for, tell me, so I can help in another way.

Ok that is interesting. Your example as it worked like I wanted gave me the idea that my problem was just because I had div in div in div but that works too. http://jsfiddle.net/0rv3v0gw/ So I take it my problem came somewhere from the sharepoint pages setup/css/whatever thus from something I didnt (and also can't thanks to that code being 10 pages long generated nintex formular code) post here. The solution in that one code was to set the z-index of the most outlying parent (parent1) to something higher than parent2s for it to work as the z-index somehow g — Thomas, Dec 12 '14 at 07:28
ot "resetted" (only in terms of it being taken into account by the system) when it came to the hierarchy lvl of the parents (inside the containing divs the z-index worked normally). As your question answered what I put into the question I'll mark it as the accepted answer (it also gave me an idea at what to look in the nintex generated forms code). tnx. — Thomas, Dec 12 '14 at 07:29

Image being drawn under a button despite z-index and position relative

1 Answers1