<header>
  I'm a fixed header.
</header>
<div class="container">
  <div class="float">
    I'm floated.
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum deserunt veniam sunt molestiae at accusantium repellat doloremque obcaecati amet consequuntur non quidem asperiores vitae sequi aspernatur odit animi laboriosam aliquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id error asperiores odit possimus maiores assumenda soluta officiis nesciunt harum illo! Sint numquam eligendi quo a nulla hic fugiat! Dolorum reprehenderit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam unde modi voluptates! Officia voluptate blanditiis rem nihil consectetur velit praesentium modi sit in eos doloribus ex totam atque dolores culpa.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo labore sint incidunt minus unde. Neque quidem maiores cumque ut in nesciunt doloremque quos aut temporibus mollitia obcaecati at autem sunt.</p>
  <div class="relative">
    I have a relative position.  I form a stacking context for my descendants because I also have a z-index.
    <div class="child">
      I am a child. I have a z-index higher than the header's, but I am still positioned below it because I am confined inside my parent context, which in turn is positioned behind the header. I am, however, placed in front of my sibling which comes after me because it's absolutely positioned with a lower z-index than mine.
    </div>
    <div class="child-2">I am child #2. I am absolutely positioned and belong to the stack of my salmon parent. I have a z-index lower than my red sibling so will be positioned behind it.</div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolorem excepturi voluptatem distinctio rem amet adipisci sapiente tenetur incidunt in a quia nesciunt illum suscipit sequi veniam rerum odio nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi et est atque inventore neque expedita ullam magni nesciunt ipsam culpa provident temporibus iusto maiores officiis esse soluta mollitia recusandae odit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime atque nihil sunt eum cum possimus quisquam delectus culpa deserunt corporis. Distinctio cum tenetur ducimus pariatur molestiae vel minima accusamus corrupti.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquam dolore quisquam quam quas dicta molestias qui odio doloremque ab debitis architecto provident sunt? Optio consectetur sit voluptate quos tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident eveniet ducimus sequi nostrum dignissimos at sapiente dolorum aperiam modi quae cupiditate placeat excepturi? Quis rerum ipsum vero earum optio?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit dicta dolores quod quidem animi cum atque repudiandae natus neque dolorum laboriosam architecto possimus culpa recusandae tempore officiis doloribus nam molestiae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium soluta nisi amet ex nulla debitis nam excepturi corporis odit temporibus quibusdam quae doloremque repellat. Non perspiciatis fugiat aspernatur distinctio veritatis!</p>
</div>
<div class="behind">
  I have z-index: -1; I will be behind in the stack. Behind the floated pink box and behind all inline text.
</div>
body {
    background-color: #F5F5F5;
    color: #555;
    font-size: 1.1em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
    padding: 20px;
    max-width: 700px;
    margin: 0 auto;
    text-align: justify;
    padding-bottom: 100px;
}

p {
    background-color: #eee;
    padding: 10px;
}

.float,
header {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: deepPink;
    color: white;
    float: left;
    margin: 15px 15px 15px 0;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    background-color: #0099CC;
    opacity: .8;
    width: 100%;
    margin: 0;
    z-index: 2;
}

.behind {
    position: fixed;
    bottom: 0;
    background-color: green;
    width: 100%;
    color: white;
    z-index: -1;
    padding: 10px;
}

.relative {
    padding: 10px;
    color: white;
    height: 300px;
    background-color: salmon;
    position: relative;
    z-index: 1;
}

.child {
    background-color: maroon;
    padding: 10px;
    margin: 10px;
    opacity: .5;
    min-height: 200px;
    /* positioned, otherwise z-index has no effect */

    position: relative;
    z-index: 30;
    /* still won't bring it in front of the header */
}

.child-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 150px;
    background-color: darksalmon;
    padding: 10px;
    z-index: 20;
}