CODEWITHSUNDEEP
htmlcss
Kacper Kwapisz
Kacper Kwapisz

Reputation: 56

Div nested inside another div isn't visible

I created a modal, but a child div inside the modal isn't showing up and I can't figure out why.

For clarity, it's the .divs1 div in the example below that isn't visible.

.ssmodal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  /*width: 100%;*/
  /*height: 100%;*/
  /*margin: auto;*/
  /*overflow: auto;*/
  background-color: #fefefe; /* Fallback color */
  /*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  font-size: inherit;
  font-family: 'Mukta';
  border:2px solid red;
}
.divz1 {
    z-index: -1;
  border:2px solid blue;
}
P {
  border:2px solid green;
}
<div id="modal" class="ssmodal">
    <div id="divs1" class="divz1">
        <p>TESTINGGGGGGG</p>
    </div>
</div>

Upvotes: 1

Views: 210

Answers (3)

Ajit Shaw
Ajit Shaw

Reputation: 44

I don't know why you put the z-index value -1 to class .divz1, I think that's the main issue here.

As the css right now the class .divz1 is floating one layer down, if you change the value greater than 1, surely it will fix your issue.

Upvotes: 0

Arjun V
Arjun V

Reputation: 197

Since your div that should be shown, is inside the parent div tag, and as you have added the property display:none; , it won't show anything inside that div. Hence try changing the display: none;

Upvotes: 1

Nithin Kumar Biliya
Nithin Kumar Biliya

Reputation: 3021

Parent div ssmodal has the property display:none. This will hide any child elements of the parent div.

Removing the property should show the child div.

Upvotes: 2

Related Questions