How to get a child element to show behind (lower z-index) than its parent?

by

You can do this in modern browsers now using transform 3D with CSS. It wasn’t really possible in 2010 but it is now.

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px)
}
<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

More Related Contents:

  1. How can I scale the content of an iframe?
  2. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  3. What is DOM reflow?
  4. What are the CSS properties that get elements out of the normal flow?
  5. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  6. CSS – How to Style a Selected Radio Buttons Label?
  7. Thick underline behind text
  8. Favicon not showing up in Google Chrome [duplicate]
  9. Apply CSS styles to an element depending on its child elements [duplicate]
  10. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  11. White space at top of page
  12. How to apply two CSS classes to a single element
  13. Why does percentage padding break my flex item?
  14. How does the vertical-align property work?
  15. Why are dashes preferred for CSS selectors / HTML attributes?
  16. Style not working for innerHTML in Angular [duplicate]
  17. Table tbody scroll in IE8
  18. How to Set Height for the Drop Down of Select box
  19. How can I prevent the scrollbar overlaying content in IE10?
  20. How to center-align one flex item and right-align another using Flexbox [duplicate]
  21. CSS3 border-radius clipping issues
  22. When I try to shift the image upwards using negative margin the whole container is moved upwards
  23. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  24. What’s the difference between HTML’s and CSS’s width attribute?
  25. How do I make flex box work in safari?
  26. Zebra striping a flexbox table with wrapping items
  27. Create a Reverse Clip-Path – CSS or SVG
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment