Databases
StackOverflow2013
Postsdbo
POZ-index not behaving as expected with absolute positioning inside a fixed position element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POZ-index not behaving as expected with absolute positioning inside a fixed position element
    primarykey
    data
    text
    <p>I've got a situation where I've got 2 or more fixed position elements on a page displaying stacked one on top of the other (that is, the top of the second one is abutting the bottom of the first one - no z-index stacking of those elements). Inside the first fixed position element, there's an absolutely positioned element which is taller than its fixed parent, so it extends beyond the bottom of that fixed parent.</p> <p>The trouble is that the next fixed position element gets displayed on top of the absolutely positioned element. I've got a higher z-index value set on the absolutely positioned element than on the fixed positioned elements, but it is ignored completely.</p> <p>To help clarify the issue, I put together this example: </p> <p><strong>HTML</strong> </p> <pre><code>&lt;div class="fixed first"&gt; &lt;p&gt;This is a fixed element&lt;/p&gt; &lt;p class="abs"&gt; I should be displayed above both fixed position elements &lt;/p&gt; &lt;/div&gt; &lt;div class="fixed second"&gt; &lt;p&gt;This is a fixed element&lt;/p&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong> </p> <pre><code>.fixed { font-size: 16px; background: #eee; border-bottom: 1px solid #ccc; position: fixed; height: 3em; width: 100%; z-index: 1; } .abs { position: absolute; background: #acc; height: 6em; top: 0; left: 25%; width: 50%; z-index: 2; } .second { top: 3.0625em; } </code></pre> <p>Here's the working example on JSFiddle:</p> <p><a href="http://jsfiddle.net/GS4E4/8/" rel="noreferrer">http://jsfiddle.net/GS4E4/8/</a></p> <p>I'm kind of stumped by this. Does anyone have an explanation as to why this is happening, and a way to work around it?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMichael Bester
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POZ-index not behaving as expected with absolute positioning inside a fixed position element
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POZ-index not behaving as expected with absolute positioning inside a fixed position element
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POZ-index not behaving as expected with absolute positioning inside a fixed position element
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO[this has a good explanation on how z-index works](http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/), as you will see all elements on the same level which have a z-index will take precedence over the child layer z-index's. With this in mind your above fiddle is working as expected
      singulars
      1. POZ-index not behaving as expected with absolute positioning inside a fixed position element
      1. USPete
    2. COOf course! I forgot that each positioned element creates its own stacking context. Because each fixed position element in the example has the same z-index value, the source order comes into play. Thanks for the reminder, Pete.
      singulars
      1. POZ-index not behaving as expected with absolute positioning inside a fixed position element
      1. USMichael Bester
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload