How to prevent get over other divs?

Question

I have a problem...In the following example i don\'t want that the div who is fixed get over the div with the background red.

Here is the example:

http://jsfiddl

Answer 1

Just give the z-index.
Hope it helps...

http://jsfiddle.net/HFjU6/1/#run

#fixedContainer {
  background-color:#ffffd;
  position: fixed;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  margin-left: -100px; /*half the width*/
  z-index: 2;
}

.div-red {
  position: relative;
  z-index: 5;
}

<div id="fixedContainer"></div>
<div style="height:200px;background-color:#bbb;"></div>
<div style="height:500px;background-color:red;" class="div-red"></div>

Answer 2

Alright, I think I get what the OP wants. He wanted a container that stays fixed on the top of the viewport, but remains confined by a parent. This behaviour is known as a conditional sticky behaviour, and is actually implemented in both Firefox (without vendor prefix) and macOS/iOS Safari (with -webkit- prefix): see position: sticky.

Therefore the easiest (but also the least cross-browser compatible) way is simply to modify your markup, such that the sticky element stays within a parent, and you declare position: sticky on it:

* {
  margin: 0;
  padding: 0;
}
#fixedContainer {
  background-color: #ffffd;
  position: -webkit-sticky;
  position: sticky;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0);  /* Negative left margins do not work with sticky */
}
#div1 {
  height: 200px;
  background-color: #bbb;
}
  #div1 .content {
    position: relative;
    top: -100px;  /* Top offset must be manually calculated */
    }
#div2 {
  height: 500px;
  background-color: red;
}

<div id="div1">
  <div id="fixedContainer">I am a sticky container that stays within the sticky parent</div>
  <div class="content">Sticky parent</div></div>
<div id="div2">Just another element</div>

An alternative would be to use a JS-based solution. In this case, you do not actually have to modify your markup. I have changed the IDs for easier identification of the elements, however.

The gist of the logic is this:

• When the scroll position does not exceed the bottom of the parent minus the outer height of the sticky content, then we do not do anything.
• When the scroll position exceeds the bottom of the parent minus the outer height of the sticky content, we dynamically calculate the top position of the sticky content so that it remains visually in the parent.

$(function() {
  $(window).scroll(function() {
    var $c = $('#sticky-container'),
      $s = $('#sticky-content'),
      $t = $(this); // Short reference to window object

    if ($t.scrollTop() > $c.outerHeight() - $s.outerHeight()) {
      $s.css('top', $c.offset().top + $c.outerHeight() - $t.scrollTop() - $s.outerHeight());
    } else {
      $s.css('top', 0);
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
div {
  height: 500px;
  background-color: red;
}
#sticky-container {
  background-color: #bbb;
  height: 200px;
}
#sticky-content {
  background-color: #ffffd;
  position: fixed;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  left: 50%;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-content">Sticky content that stays within the bounds of #div1</div>
<div id="sticky-container">Sticky confinement area</div>
<div>Other content</div>

---

Old answer before OP clarified the question appropriately:

Just give them the appropriate z-index values. In this case, you want to:

1. Do not use static positioning. This can be done by using position: relative for the large elements, in conjunction with the originally position: fixed element.
2. Assign the appropriate stacking order. The grey <div> element to have the lowest z-index, followed by the position fixed element, and then by the red element.

There are some catchalls to stacking though: the stacking context is reset when you traverse up or down the node tree. For example, the example will not work if the elements are not siblings.

Here is a proof-of-concept example, modified from your fiddle so that inline CSS is removed.

* {
  margin: 0;
  padding: 0;
}
#fixedContainer {
  background-color: #ffffd;
  position: fixed;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  margin-left: -100px;
  z-index: 2;
}
#div1 {
  height: 200px;
  background-color: #bbb;
  position: relative;
  z-index: 1;
}
#div2 {
  height: 500px;
  background-color: red;
  position: relative;
  z-index: 3;
}

<div id="fixedContainer">z-index: 2</div>
<div id="div1">z-index: 1</div>
<div id="div2">z-index: 3</div>