Search code examples
htmlcssopacitytransparent

html div element transparent

I have this code:

<li class="nav-item dropdown" id="noti_Container" >
 <div id="noti_Counter" style="opacity: 1; top: -2px;"></div>
 <a style=" margin-right: 20px; color: white;" >
 <i class="fa fa-bell-o fa-lg" id="noti_Button" aria-hidden="true" ></i></a>
 <div id="notifications" style="display: none;">
  <h3>Notifications</h3>
  <div  id="not1"> </div>
  <div class="seeAll"><a href="#">See All</a></div>
 </div>
</li>

Notification generate in javascript code and added to div not1. My problem is that this div transparent and elements in background show up. I look for transparent and opacity in css but didn't found. How change it to normal div appearance? The table in the background interferes with opening notifications. It should be noted that notifications also consist of table elements. Perhaps this is the original source of the problem?

enter image description here

Solution

  • Your problem isn't transparency, it's related to z-index property in CSS. try changing the z-index of both elements in front and back and see what happens with it.