1

I try to do a simple think but I am stuck. I have a div "scrolling" with a fixed position. When I scroll the page, I want that the div "scrolling" goes behind all other div below.

I put an exemple in : exemple jsfiddle

.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
}

Thank you for your help

Maxa88
  • 11
  • 2

4 Answers4

3

doable with z-index. But for the z-index to work, it must be position: absolute, position:fixed, or position:relative.

.top{
  width:auto;
  background-attachment: fixed; 
  height:300px;  
    background-image: linear-gradient(pink, green);
}
.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
  z-index:4;
}
<div class="top">
  <div>
    Hello
  </div>
  <div>
    Hello
  </div>
</div>
<div class="scrolling">
  SCROLL
  <br>
  I want to stay behind the div grey
</div>

<div style="width:auto; height:50px; background-color:grey;position:relative;z-index:5">

</div>
  
<div style="width:auto; height:350px; background-color:grey;position:relative;z-index:5">
  I want to be in displayed in front
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
0

Pretty sure a (z index) is what you want to use here.

I updated your fiddle below. Z index allows you to position from front to back. 

<div class="top">
  <div>
    Hello
  </div>
  <div>
    Hello
  </div>
</div>
<div class="scrolling">
  SCROLL
  <br>
  I want to stay behind the div grey
</div>


<div class="front" style="width:auto; height:350px; background-color:grey;">
  I want to be in displayed in front
</div>

.top{
  width:auto;
  background-attachment: fixed; 
  height:300px;  
  background-image: linear-gradient(pink, green);
  z-index: 0;
}
.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
  z-index: 0;
}
.front{
  z-index: 1;
  position: relative;
}
Tanner_Gram
  • 1,090
  • 9
  • 19
  • 1
    That puts the element behind *everything*, thus never visible. If you take a look at OP's provided JSFiddle, you'll see that the element should be visible until scrolled over by the gray element. – Tyler Roper Dec 05 '18 at 21:17
  • After I posted that I actually went into the fiddle and provided the correct code. You are right. – Tanner_Gram Dec 05 '18 at 21:24
0

To answer your question, you need to understand concepts like z-index and/or how the stacking order works. There are great articles that will explain z-index, but one in particular I really enjoy is What no one told you about z-index.

A snippet from the referenced article above:

When you introduce the position property into the mix, any positioned elements (and their children) are displayed in front of any non-positioned elements. (To say an element is “positioned” means that it has a position value other than static, e.g., relative, absolute, etc.)

Interestingly enough, there's a CSS3 property that does something similar. You can address your issue, without the need of explicitly applying a z-index, by using transform.

For example, if we apply transform: translateX(0) to your JSFiddle, you'll see that the gray div now sits above your text. Here's an updated fiddle:

https://jsfiddle.net/gh94Lbad/

<div style="width:auto; height:50px; background-color:grey; transform: translateX(0)"></div>
<div style="width:auto; height:350px; background-color:grey;transform: translateX(0)">I want to be in displayed in front</div>

The reason transform works (by modifying the stacking context) is explained in the spec:

For elements whose layout is governed by the CSS box model, any value other than none for the transform property results in the creation of a stacking context. Implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index: 0. If an element with a transform is positioned, the z-index property applies as described in [CSS2], except that auto is treated as 0 since a new stacking context is always created.

Edit: As pointed out by @TemaniAfif, it's probably better to explain how this works by explaining the paint order of your elements:

For this you need to consider the painting order (w3.org/TR/css-position-3/#painting-order) where you find that transformed element are painted later thus they are above. (in the step (8) )

Jack
  • 9,151
  • 2
  • 32
  • 44
  • the quote is not the correct one to explain the behavior of transform ... you explained that transform create a stacking context which doesn't imply that it should be above the other element. For this you need to consider the painting order (https://www.w3.org/TR/css-position-3/#painting-order) where you find that transformed element are painted later thus they are above. (in the step (8) ) – Temani Afif Dec 05 '18 at 21:44
  • 1
    Probably the use of *not correct* isn't the right, but I would say it's not accurate as it doesn't explain that it should be painted after other element – Temani Afif Dec 05 '18 at 21:51
  • That's a great point :) I tend to think of stacking context/paint order as one, as they're so closely related. But the technical explanation of _why_ transform affects the rendering is addressed by the paint order and the link you provided. – Jack Dec 05 '18 at 21:56
0

You need to use more z-index to element that you want to be seen and use less z-index to element "behind".

Anton Andryevskiy
  • 24
  • 2