-1

This code:

<div class="social">
<span class="st_facebook_large"></span>
<span class="st_twitter_large"></span>
<span class="st_email_large"></span>
<span class="st_sharethis_large"></span>
<span class="st_plusone_button_large"></span>
</div>

is causing this styling error:

enter image description here

URL to this scenario

My question: How can I make this picture appear IN FRONT of the "Share this"-buttons?

Joneskvist
  • 137
  • 3
  • 3
  • 13

3 Answers3

1

in the stylesheet add this:

.yith_magnifier_zoom_wrap {z-index:999 !important}
Paul
  • 633
  • 2
  • 13
  • 22
1

Remove z-index from #single-product .images > .yith_magnifier_zoom_wrap

OR

Give z-index:99; in #single-product .images > .yith_magnifier_zoom_wrap

OR

Specify z-index:99; as inline-CSS for div with class name yith_magnifier_zoom_magnifier as usage of !important in CSS is not recommended..

Lal
  • 14,726
  • 4
  • 45
  • 70
  • You are awsome, you just combined 2 of the questions and gave me the right result. Cheers to you. – Joneskvist Jan 22 '15 at 18:04
  • Yes it works! By the way what is the diffrence in giving it `z-index:99` to `z-index:999` ?Thank you .) – Joneskvist Jan 22 '15 at 18:10
  • Basically..the z-index property specifies the stack order of an element.An element with greater stack order is always in front of an element with a lower stack order. – Lal Jan 22 '15 at 18:11
  • It would be safe to use `z-index:99;` if you have less than 99 elements and if greater use a higher value instead.. – Lal Jan 22 '15 at 18:13
  • Oh I understand, Thank you for the well explained answer. By the way the error appeared again, would you mind looking at it again in the [link](http://www.shopstuff.se/produkt/nam-dehicula-eros-tempor-auctor-lorem-4/) – Joneskvist Jan 22 '15 at 18:15
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69408/discussion-between-joneskvist-and-lal). – Joneskvist Jan 22 '15 at 18:16
0

Try:

.social {
position:absolute;
z-index:999;
margin-left: -50px;
}

.image
{
position:absolute;
z-index:1;
}

You may need to play with a negative margin or padding to get the buttons to not be covered by the image...

Tim
  • 4,051
  • 10
  • 36
  • 60
  • Hm when you say **play with a negative margin or padding** which components in the css are you talking about? Regards – Joneskvist Jan 22 '15 at 18:01
  • I've updated my sample - if you use a negative margin on the left or the top, you can pull the content in that direction. This would pull the social div 50 pixels to the left. – Tim Jan 22 '15 at 18:04
  • Hi can you please edit your answer and write `z-index:999` because that one worked for me. So I can mark your answer as solved. By the way what does the z-index do? You have written to of them. One in the .social and one in the .image. – Joneskvist Jan 22 '15 at 18:06
  • z-index treats your content like a stack of cards. Lower numbers are lower in the stack, higher numbers are higher. It's like sticking post-it notes of varying sizes on a piece of paper. – Tim Jan 22 '15 at 19:09