z-index not working?

Hello,

I was trying something out with a layout and stumbled on a problem. I have icons in some profile fields, but with the codes are they are now the content and label kind of go OVER the icon. It would be best if I could hide both of these things behind the icon, but sadly I can't find a solution for this. I've tried it with a z-index, but that doesn't seem to work for some reason?

HTML

Code:

<td class="row1" valign="top">
         <table width="426" border="0" cellspacing="1" cellpadding="0">
         
         <!-- BEGIN profile_field -->
         <tr id="field_id{profile_field.ID}" style="display:block;">
                          <td width="40%" align="left" valign="top" nowrap="nowrap"><span class="deproflabel">{profile_field.LABEL}&nbsp;&nbsp;</span></td>
                          <td width="60%" align="left"><span class="deprofcontent">{profile_field.CONTENT}</span>
                          </td>
         </tr>
         <!-- END profile_field -->
         </table>
      </td>

CSS

Code:

.deprofcontent img {
  position: relative;
  z-index: 999;
  margin-bottom: -5px;
  margin-top: -5px;
}

.deprofcontent {
    background: #f5f5f5;
  border-radius: 0 10px 10px 0;
  font-size: 10px;
  padding: 5px;
  position: relative;
  display: block;
      z-index: 998;
}
  
.deproflabel {
  padding: 5px;
  background: #ddd;
    border-radius: 10px 0 0 10px;
    text-align: right;
  font-size: 9px;
  width: 120px;
  position: relative;
  text-transform: uppercase;
    color: #ffffff;
      z-index: 998;
display: block;
}


URL: http://dungeon-explorers.actieforum.com/u1

Greetings,
Hert

From what I can tell, the field you're using has a parent with a class of the same zIndex.


You should set the label to a zIndex that's higher. Such as 999 for example :

Code:

.deproflabel {
  position:relative;
  z-index:999;
}

I already did that:

Code:

.deprofcontent img {
  position: relative;
  z-index: 999;
  margin-bottom: -5px;
  margin-top: -5px;
}

Or is this the incorrect way to do so?
And it's not the label, the icon of the field should have a higher z-index

Wait, you wanted the "character information" part to be on top, right ? Just making sure I comprehended correctly.

Anyway, normally when elements have equal zIndexes, the one that comes later in the document will display on top. So the previous element should be given a zIndex at least 1 point higher if you want it to display over an element that comes later.

Yes, I do want that on top ^^
But I was hoping I could also get rid of the border part if I put it on top of everything - but maybe that isn't the way how z-indexes work ^^'

Yeah, zIndex just changes the stack index of elements. Such as 1 covers the other and vice versa. I guess to get rid of that border you could make the element with the higher zIndex cover a larger area to hide it, or remove the style. It depends. ^^

I fixed it by adding a negative margin and that worked just fine ^^
I'm not that familiar with z-indexes so I prefer this option since I know how that works :>

But thanks a lot!
(This is solved now ~)

You're welcome ^^

Topic archived

Have a nice day.