0

I'm trying to put the image on the bottom behind the image on the top to make a border around the image. I realize that the image isn't formatted correctly just yet and that's the next part. I'm using wordpress. I set the z-index for each to 1 (border) and -1 (image) and I tried messing with the margin, padding, position but they didn't do anything.

Here's the code on JSFiddle: https://jsfiddle.net/5L8mnfdc/

#pl-9 .panel-grid-cell .so-panel {
    z-index: 1;
}

.sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container {
    z-index: -1 !important;
}

Layout

Community
  • 1
  • 1
user3583313
  • 53
  • 1
  • 9
  • @AndreiGheorghiu - Let's focus on the asker's question. If you want to know about their life choices, it seems off-topic here. – Alec Dec 31 '16 at 00:41
  • 1
    The jsfiddle seems broken. Is there any other way to see a working example? – Nora Dec 31 '16 at 00:42
  • `z-index` is not *global* in a document. In order to use it, you have to understand `stacking-contexts`. I recently explained it [here](http://stackoverflow.com/questions/41385907/why-isnt-z-index-working/41385975#41385975) (see the **Stacking contexts principle** subtitle and fiddle above it). – tao Dec 31 '16 at 00:44
  • @Nora Not really. I think it's because of the images aren't showing up because they're not referenced? – user3583313 Dec 31 '16 at 01:48

1 Answers1

0

Your problem has nothing to do with the z-index, but instead with the positioning properties of the elements. Find what css block determines where they are and how they correspond to their parents position.

guru_laghima
  • 49
  • 1
  • 7