发表新帖
发表新帖

z-index not working with fixed positioning

后端 未结
关注
8 1172
广开言路
广开言路 2020-11-22 03:46

I have a div with default positioning (i.e. position:static) and a div with a fixed position.

If I set the z-index

相关标签:
8条回答
  • 南方客
    2020-11-22 04:18

    Add position: relative; to #over

        #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
        <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>

    Fiddle

    0 讨论(0)
  • 滥情空心
    2020-11-22 04:21

    z-index only works within a particular context i.e. relative, fixed or absolute position.

    z-index for a relative div has nothing to do with the z-index of an absolutely or fixed div.

    EDIT This is an incomplete answer. This answer provides false information. Please review @Dansingerman's comment and example below.

    0 讨论(0)
  • 逝去的感伤
    2020-11-22 04:26

    This question can be solved in a number of ways, but really, knowing the stacking rules allows you to find the best answer that works for you.

    Solutions

    The <html> element is your only stacking context, so just follow the stacking rules inside a stacking context and you will see that elements are stacked in this order

    1. The stacking context’s root element (the <html> element in this case)
    2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
    3. Non-positioned elements (ordered by appearance in the HTML)
    4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
    5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

    So you can

    1. set a z-index of -1, for #under positioned -ve z-index appear behind non-positioned #over element
    2. set the position of #over to relative so that rule 5 applies to it

    The Real Problem

    Developers should know the following before trying to change the stacking order of elements.

    1. When a stacking context is formed
      • By default, the <html> element is the root element and is the first stacking context
    2. Stacking order within a stacking context

    The Stacking order and stacking context rules below are from this link

    When a stacking context is formed

    • When an element is the root element of a document (the <html> element)
    • When an element has a position value other than static and a z-index value other than auto
    • When an element has an opacity value less than 1
    • Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
    • As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

    Stacking Order within a Stacking Context

    The order of elements:

    1. The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules above)
      • You cannot put a child element behind a root stacking context element
    2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
    3. Non-positioned elements (ordered by appearance in the HTML)
    4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
    5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
    0 讨论(0)
  • 刺人心
    2020-11-22 04:29

    I was building a nav menu. I have overflow: hidden in my nav's css which hid everything. I thought it was a z-index problem, but really I was hiding everything outside my nav.

    0 讨论(0)
  • 太阳男子
    2020-11-22 04:31

    Give the #under a negative z-index, e.g. -1

    This happens because the z-index property is ignored in position: static;, which happens to be the default value; so in the CSS code you wrote, z-index is 1 for both elements no matter how high you set it in #over.

    By giving #under a negative value, it will be behind any z-index: 1; element, i.e. #over.

    0 讨论(0)
  • 醉酒成梦
    2020-11-22 04:33

    the behaviour of fixed elements (and absolute elements) as defined in CSS Spec:

    They behave as they are detached from document, and placed in the nearest fixed/absolute positioned parent. (not a word by word quote)

    This makes zindex calculation a bit complicated, I solved my problem (the same situation) by dynamically creating a container in body element and moving all such elements (which are class-ed as "my-fixed-ones" inside that body-level element)

    0 讨论(0)
 看不清?
提交回复
热议问题