CODEWITHSUNDEEP
htmlcss
D-user
D-user

Reputation: 159

Trying to display div over table

I have tried to display div over table using z-index. I have searched on google about z-index. The information i got that z-index will only work on an element whose position property has been explicitly set to absolute , fixed , or relative. But it is still not working for me. Please check my code and please explain what is the issue.

.task {
  position: relative;
  z-index: 1;
}

#check_filter {
  width: 200px;
  padding: 20px;
  float: left;
  position: absolute;
  z-index: 2!important;
  margin-left: 60px;
  margin-top: 7px;
  box-shadow: 1px 0px 20px 1px grey;
}

#radio_filter {
  width: 200px;
  padding: 20px;
  float: left;
  position: absolute;
  z-index: 2!important;
  margin-left: 180px;
  margin-top: 7px;
  box-shadow: 1px 0px 20px 1px grey;
}
Filters:&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="assign">Assigned To</a> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="done">Done</a>
<div id="check_filter">
  <div class="checkbox">
    <label><input type="checkbox" value="">Option 1</label>
  </div>
</div>

<div id="radio_filter">
  <div class="radio">
    <label><input type="radio" name="yes">Yes</label><br>
    <label><input type="radio" name="no">No</label>
  </div>
</div>
<br>
<table class="task" style="margin-top:30px; width:100%!important;">
  <thead>
    <tr style="background-color:black;color:white;">
      <th>Task id</th>
      <th>Task name</th>
      <th>Task description</th>
      <th>Assigned to</th>
      <th>Done(yes/no)</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>

</table>

Upvotes: 0

Views: 562

Answers (1)

Mordecai
Mordecai

Reputation: 1494

Your DIVs are already over table. You can't notice it, because the background of DIVs is transparent... To see/understand that, add background to DIVs.

.task {
  position: relative;
  z-index: 1;
}

#check_filter {
  width: 200px;
  padding: 20px;
  float: left;
  position: absolute;
  z-index: 2!important;
  margin-left: 60px;
  margin-top: 7px;
  box-shadow: 1px 0px 20px 1px grey;
}

#radio_filter {
  width: 200px;
  padding: 20px;
  float: left;
  position: absolute;
  z-index: 2!important;
  margin-left: 180px;
  margin-top: 7px;
  box-shadow: 1px 0px 20px 1px grey;
}

[id$="filter"] {
  background: white
}
Filters:&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="assign">Assigned To</a> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="done">Done</a>
<div id="check_filter">
  <div class="checkbox">
    <label><input type="checkbox" value="">Option 1</label>
  </div>
</div>

<div id="radio_filter">
  <div class="radio">
    <label><input type="radio" name="yes">Yes</label><br>
    <label><input type="radio" name="no">No</label>
  </div>
</div>
<br>
<table class="task" style="margin-top:30px; width:100%!important;">
  <thead>
    <tr style="background-color:black;color:white;">
      <th>Task id</th>
      <th>Task name</th>
      <th>Task description</th>
      <th>Assigned to</th>
      <th>Done(yes/no)</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>

</table>

Upvotes: 2

Related Questions