Set z-index

HTML & CSS
1

Hi does anyone know how do I push the child div to behind of the parent? I want parent to cover the child completely but z-index doesnt’ seems to work for my case. Any help greatly appreciated.

<style>
.parent {
	bottom: 10        !important;
	width: 100%      !important;
	height: 18px      !important;
	overflow: hidden !important;
	line-height:12px !important;
	font-size: 11px  !important;
	text-align: center;
	cursor: s-resize;
    background:#000;
z-index:9999;
	}

.child {
    width:13px;
    height:6px;
margin:auto;
color:#fff;
z-index:999;
}
</style>

<div class='parent'><div class='child'>sfds</div></div>
2

Z index only works if you also have position set on the thingy. So just add position relative to both and it should work.

3

Thanks Eric but doesn’t seems to have any effect :frowning:

4

What are you actually trying to achieve here? There is probably a better way to do this.

5

Thanks for your reply ralph, actually this is div box with a resize handle. I wanted to use a background image for the handle so I added a “child” in the parent.


<style>
.ui-resizable-s { // The resize handle
	bottom: 0        !important; /* importants override pre jquery ui 1.7 styles */
	width: 100%      !important;
	height: 8px      !important;
	overflow: hidden !important;
	line-height:12px !important;
	font-size: 11px  !important;
	text-align: center;
	cursor: s-resize;
	}

.resizable { /* I added this child */
    width:13px;
    height:6px;
    background:url(../../../../../../www/themes/img/imageset.png) no-repeat;
    margin:auto; // centralize the div
}
</style>

<div class='ui-resizable-s'><div class='resizable'></div>

Cosmetic wise is showing up great but when I mouse over the resize handle, it broke my jquery drag functionality. The ‘child’ div being in the front seems to block the handle, hence I need to push it behind by using z-index. Any advise is greatly appreciated.

6

You don’t need an extra div for a background image. Just put the bg image on the original div itself.

7

I can’t just add it in, the ui-resizable-s is provided by the third party plugin and it is with a width of 100% which is needed to cover up the entire div width. My own added .resizable has a width of 13px which is an icon.

8

Why not? With no-repeat on, the image won’t repeat across the background, and you can place it where needed.

9

Ok very sorry I missed this part. Because my imageset is a full image with multiple icons and I have a position set for different handle.


.blueResizable { background-position: 0px -394px; }
.redResizable { background-position: -13px -394px; }

// So in javascript, it is actually like this:
html +="<div class='ui-resizable-s'><div class='resizable " + div.className + "Resizable'></div></div>";

So .resizable is actually like a “universal” holder to hold the image.

10

Solved by using margin. Thanks everyone.

11

If you have to say !important that many times, and up-tree link (…/) that many times, there is something HORRENDOUSLY WRONG with what you are working on.

12

All those !importants make my head hurt…