How to Get a Parent Element to Appear Above Child

Show child element above parent element using CSS

Set overflow: visible; on the parent div.

#parent {
    overflow: visible;
}

Changed to reflect asker's update.

How can I show child element above parent element AND siblings of the parent element?

position: relative for an element creates a new positioning context. Child elements of this element are positioned in this local context. They cannot leave this context. If you want to position child elements above siblings of its parent element, you should set z-index for its parent element to a higher value than z-index of its siblings.

If the effective z-index position of the element relatively to its siblings solely depends on their DOM-tree order, then moving the element to position after all its siblings in DOM tree (if semantically appropriate) could help as well.

Note that you can always change z-index dynamically via JavaScript (just, in terms of Unobtrusive JS, don’t forget to provide a reasonable pure-CSS alternative so that content wasn’t hidden if JS is disabled).

How to make child element higher z-index than parent?

This is impossible as a child's z-index is set to the same stacking index as its parent.

You have already solved the problem by removing the z-index from the parent, keep it like this or make the element a sibling instead of a child.

CSS Z-index child above parent and div under parent

Unfortunately, this isn't possible. z-index is only applicable when two elements are on the same level in the DOM tree (i.e. they have the same parent element).

You can find more details regarding this in this article, especially in the Stacking Contexts part in the article.

Also, here's a link to MDN's page on Stacking Context in z-index for a more detailed explanation.

How to make parent div above child div without position absolute?

"not really hide it, I just want the parent div to be on top of it"

The only reason I could think you might want this is if the parent div was partially transparent, so you could still see the children underneath... In which case you could put a third div which was the same height & width as the parent but position absolute...

<div id="parent">
  <div class="leftbox">left</div>
  <div class="leftbox">right</div>
  <div class="cover"></div>
</div>

Then...

div.cover {
   position:absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   transition: all .3s;
}     

#parent:hover > div.cover, div.cover:hover {
  background-color: #000000;
}

#parent { position: relative; } /* As well as your own code */