CODEWITHSUNDEEP
htmlcss
malannda
malannda

Reputation: 15

How do i fix a image overlapping my header shadow?

Im using unbounce.com and created a shadow with the custom CSS option. The image from the section underneath is overlapping the shadow from the header element. What do I need to do to change this issue?

Here you can see the problem

this is the code im using to create the shadow:

#lp-pom-block-11-color-overlay {
        -webkit-box-shadow:
          0 0.063rem 0.313rem rgba(0,0,0,0.2), 
          0 0.188rem 0.25rem rgba(0,0,0,0.12), 
          0 0.125rem 0.25rem rgba(0,0,0,0.14)
  }

Upvotes: 1

Views: 295

Answers (2)

Amarjit Singh
Amarjit Singh

Reputation: 1192

Make z-index value of #lp-pom-block-11-color-overlay bigger than below div. z-index property always work with position except static

#lp-pom-block-11-color-overlay {
        -webkit-box-shadow:
          0 0.063rem 0.313rem rgba(0,0,0,0.2), 
          0 0.188rem 0.25rem rgba(0,0,0,0.12), 
          0 0.125rem 0.25rem rgba(0,0,0,0.14);
          position: relative;
          z-index: 9;
  }

Upvotes: 1

Sumit Patel
Sumit Patel

Reputation: 4638

Use z-index property to stack them to get over the overlapping issue.

More Info

Upvotes: 1

Related Questions