[Pro] Menu disappears behind content

Ah-ha!
Op 29 nov. 2014 15:08 schreef “Ernie Simpson” email@hidden:

The item that required the z-index to be 99 was CONTAINER2, so that Menu
would be on top of everything else.

I guess so Iain… I haven’t been really reading this thread and just
addressed the theory of finding the correct element to elevate, not
necessarily your specific page.

The terminology may be the biggest issue for most people… parent, child,
sibling, descendant… can be confusing at first, but I think it clears
everything up once you get used to it.

<div id="item1"> <!-- this is the PARENT item -->
      <div id="item2"> <! -- this is a CHILD of item1 -->
      <div id="item3"> <!-- this is a SIBLING of item2, and also a CHILD of
item1 -->
            <div id="item4"> <!-- this is a CHILD of item3 but not item1…
it's a DESCENDANT of item1 -->

Now I am using divs (HTML containers) for this example, but this hierarchy
also applies to text, images, lists – ANY html structure that resides
within any html container.

<div id-"item1"> <!-- the PARENT item -->
      <h1>The Big Heading</h1>
      <p>The following paragraph…</p>
      <p><img src="look-an-image.jpg"></p>
      <ol id="bullet-list"> <!-- a bulleted list -->
            <li>List items of the bulleted list</li>
      </ol>

The layer order of all these items can be reset WITHIN their parent item
using the z-index CSS property. We DON’T do this normally because we
usually never need to… these are what we call “block-level” elements which
do their best not to interfere with one another naturally. However, no
matter what z-index value we give to any of SIBLING items, they cannot be
elevated above (or below) the PARENT item.

SO… the z-index solution works best when the occluding element is a SIBLING
of the blocked element. Figuring out where the two elements then share that
relationship determines where the z-index solution is applied.

It sounds to me Iain as if you understand the principle… I’m just spelling
it out for the other folks who may one day read this thread and go “Ah-ha!”


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yep, it even makes sense to me! Thanks again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options