Rajat Sharma Rajat Sharma - 6 months ago 8
CSS Question

How to vertically center my name over an image

My name at the right is supposed to be in front of the image that is currently below it. How do I fix this?

https://jsfiddle.net/L18cunx2/

<div class="container">
<div class="row">
<div class="one columns">
<input class="bbar" placeholder="search">
</div>
<div class="eleven columns person">
<span><a class="username">Rajat Sharma</a></span> <img alt="" src="logout.png">
</div>
</div>
</div>

Answer

I am a little unclear on your question but will do the best I can to answer. You are going to want to create a stacking context within the div.person container.

You can set position:relative to the div.person span, and div.person img elements. You then set the z-index to 1 for div.person span. This will put the span above the image.

Example Code:

div.person span, div.person img {
   position:relative
}

div.person span {
   z-index:1;
}

Hope this helps.

Comments