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://jsfiddle.net/HFjU6/3645/
#fixedContainer
{
background-color:#ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
}
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: #ddd; 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:
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: #ddd; 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:
position: relative
for the large elements, in conjunction with the originally position: fixed
element. <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: #ddd; 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>
Just give the z-index.
Hope it helps...
http://jsfiddle.net/HFjU6/1/#run
#fixedContainer { background-color:#ddd; 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.