CODEWITHSUNDEEP
htmlcss
sci-guy
sci-guy

Reputation: 2584

DIV element with box-shadow appearing behind DIV element with image

I have tried for hours now -- so desperate attempt to consult this community now.

I have a website I am developing and I have a div element with a box-shadow at the bottom and then an image in a span tag next to it.

The box-shadow keeps appearing behind the image. I have tried pseduo elements, position variables, etc with css but nothing works.

How can I bring the shadow infront of the image?

A pure css solution would be great.

css

Page can be found here: https://paradigmtek.com/tv-wall-mount-installation-2/

Upvotes: 1

Views: 71

Answers (2)

Alexander Nied
Alexander Nied

Reputation: 13623

Looking at your page, this is easily solved by giving the nav container (.fusion-fullwidth.fullwidth-box.fusion-builder-row-1.title_heading_container_cust.hundred-percent-fullwidth.non-hundred-percent-height-scrolling) a z-index of 100. It is the first child of the .post-content-classed div.

Upvotes: 2

Mark
Mark

Reputation: 399

As per your question, to bring forward a shadow is not possible (or I don't know a good way to do it).

A similar alternative is adding a margin to the image, to push it lower down the page. The simplest fix is to go into the HTML file, and add inline CSS of style="margin-top: x", or style="margin: x 0 0 0" where x is your desired value.

That would give a result very similar to the screenshot below.

enter image description here

plus, it doesn't look bad this way either :)

Upvotes: -1

Related Questions