1

I know there's a pic about pseudo elements' own relationship.

pseudo elements relationship, content>::after>::before>element

(from CSS tricks)

I met a problem about this, where I'd like to make .nav-box's white background-color in front of .nav-box::after's black one, as a floating menu list. Though I'd seen this from previous question, it seems to be impossible to make the above work. Would like to check if so.

Code is also on JSBIN.

body {
  position: relative;
  z-index: 1;
}

.nav-box {
    position: relative;
    z-index: 50; /* no effects */
    top: 0;
    right: 0;
    width: 60vw;
    height: 100vh;
    border: 1px solid red;
    background-color: white;
}

.nav-box::after {
    position: absolute;
    z-index: -1;
    content:"";
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
}

.nav-box::before {
  /* this will be a menu button */
    position: absolute;
    z-index: 10;
    right: 0;
    content: "O";
    color: orange;
    font-size: 40px;
}
<body>
<nav class="nav-box">
  <ul class="menu-box">
    <li><a href="">About</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
</body>
Community
  • 1
  • 1
chenghuayang
  • 1,424
  • 1
  • 17
  • 35

1 Answers1

2

I am not entirely sure what you are trying to achieve but try removing z-index from .nav-box .

Manu
  • 185
  • 4
  • 11
  • Man, it works! Thanks! And I wonder if you could give me some ref to red. :)? – chenghuayang Aug 07 '15 at 07:16
  • Actually if you read the first sections @ [Nicolas Gallagher - Multiple Backgrounds and Borders with CSS 2.1](http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/) and see the (you can play with it as well) [Demo](http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html), you can understand the concept. – Manu Aug 07 '15 at 08:35
  • What you can achieve with that, is to have multiple backgrounds sitting on top of each other. However, bare in mind that if the elements are of the same size and plain color, the top one will overlap the rest, whereas if you play with images and transparent backgrounds you can combine them as you initially desired and the demo demonstrates too. If my answer satisfies you please accept it as well. Thanks! – Manu Aug 07 '15 at 08:36