CODEWITHSUNDEEP
htmlcsszurb-foundationzurb-foundation-6
Abhilash Bhargava
Abhilash Bhargava

Reputation: 604

Foundation 6 Nested Modal, Z-index issue

I am trying to place the cross button on the top right corner as displayed in the image;Close Modal not displayed properly the Z-index is not working for the nested modal.. It is a layer of Z-Index that has been used, .reveal-overlay with position: fixed and Z-index value of 1005, inside which .reveal with z-index 1006 and I want to have close-modal on top of everything. - Code -

HTML - 

<div class="reveal-overlay">
   <div class="reveal">
      <div class="close-modal">
      </div>
   </div>
</div>

CSS - 

.reveal-overlay {
   position: fixed;
   z-index: 1005;
}
.reveal {
   position: relation;
   z-index: 1006;
}

If I give position: absolute to close-modal and z-index: 1007, it does not come on top, any suggestion that why is this happening or the mistake that I am doing in fixing this? I have read these stack-overflow links for references - 1. CSS I want a div to be on top of everything 2. CSS z-index not working (position absolute) 3. Putting something on top of a modal (Zurb Foundation) 4. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

The link for code pen is - https://codepen.io/IamManchanda/pen/PmaxBz

In this, the cross in the top right corner is to be placed outside the white box. Thanks to anyone who helps me with this problem.

Upvotes: 0

Views: 315

Answers (0)

Related Questions