The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

z-index not working?

View previous topic View next topic Go down

Solved z-index not working?

Post by Hert on September 6th 2015, 11:10 pm

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


Last edited by Hert on September 8th 2015, 1:38 pm; edited 1 time in total

Hert
Forumember

Posts : 81
Reputation : 3
Language : Dutch and English

http://afterthefall.actieforum.com/

Back to top Go down

Solved Re: z-index not working?

Post by Ange Tuteur on September 7th 2015, 11:47 am

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;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: z-index not working?

Post by Hert on September 7th 2015, 2:20 pm

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

Hert
Forumember

Posts : 81
Reputation : 3
Language : Dutch and English

http://afterthefall.actieforum.com/

Back to top Go down

Solved Re: z-index not working?

Post by Ange Tuteur on September 7th 2015, 2:24 pm

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

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: z-index not working?

Post by Hert on September 7th 2015, 2:49 pm

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 ^^'

Hert
Forumember

Posts : 81
Reputation : 3
Language : Dutch and English

http://afterthefall.actieforum.com/

Back to top Go down

Solved Re: z-index not working?

Post by Ange Tuteur on September 7th 2015, 3:03 pm

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. ^^

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: z-index not working?

Post by Hert on September 8th 2015, 1:38 pm

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 ~)

Hert
Forumember

Posts : 81
Reputation : 3
Language : Dutch and English

http://afterthefall.actieforum.com/

Back to top Go down

Solved Re: z-index not working?

Post by Ange Tuteur on September 8th 2015, 3:59 pm

You're welcome ^^

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum