0

I am trying to show circles that represent co-authors of a document but when there are too many, I want to collapse it down so that it takes up less space. This will look a little like this:

Stacked Balls

Here is the simplified code:

.precence-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.member-name {
  float: left;
  width: 15px;
  display: block;
  z-index: 0;
}

.member-name:hover {
  z-index: 10;
}

.member-icon {
  color: #FFFFFF;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  border-radius: 15px;
  cursor: pointer;
}
<ul class="precence-list">
  <li class="member-name">
    <div class="member-icon" style="background-color: #FB563C">AA</div>
  </li>
  <li class="member-name">
    <div class="member-icon" style="background-color: #66CC00">EE</div>
  </li>
  <li class="member-name">
    <div class="member-icon" style="background-color: #00BCD4">II</div>
  </li>
</ul>

I want the hovered list item to come to the front. I thought I'd be able to just change the z-index, but this does not appear to work.

Hovering appears to do nothing. Is there a relatively simple way to bring the elements to the front? What is getting in the way of the z-index working? I would prefer to do this without JavaScript, but will if that is the only way.

nephiw
  • 1,964
  • 18
  • 38
  • 2
    `z-index` won't be respected in the default `position: static`. You probably want `position: relative`. – Alexander Nied May 03 '19 at 16:13
  • Respectfully @temani-afif - I did look for a solution before posting. You are completely right, the answer to my question is a duplicate. However, CSS is so situational that it is difficult to find solutions to common problems on StackOverflow unless you really know the root problem. I would not have searched for "Why does z-index not work" because I know z-index does work and suspected something specific about my setup. Will you un-mark this question as a duplicate and link to the correct answer instead? I believe this will help people more easily find the correct answer. Thanks. – nephiw May 06 '19 at 16:54

0 Answers0