SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    two simple (i'd imagine)css questions

    Hello all!
    was wondering...
    1. do i need an absolute position for a relative one or vice versa? I think i have seen samples of work where only element is given a relative position but the other elements are not absolute.
    I'd imagine the absolute default is the body?

    2. z index. kinda the same thing. if you have a lot of elements/divs/component on your page. can you only give he z-index to one or two they you wish to affect or do all of them have to be indexed?

    Thank you all have a great weekend.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Hmm not such a simple question actually

    Perhaps its better to just define how positioning works and then it may make it clearer to you.

    1)
    When you absolutely position something it is placed in relation to the nearest ancestor that has a position defined other than static. If no ancestor has a position defined (either relative or absolute) then your element is placed in relation to the body (effectively the viewport).

    In simple terms if you absolutely position an element and its parent is either position:relative or position:absolute then that child elements takes its starting position as the top left of that parent element. If the parent element is them moved then so does the child. If on the other hand the element's parent (and any other ancestors have no position defined then the child element is placed in relation to the viewport and should the parent be moved the child will not care a jot and stay where it was

    2)
    Z-index defines the stacking strategy for positioned elements. It does not apply to elements that are static (position:static - the default). Therefore if you want to apply a z-index to a static element it must first be set to position:relative and then the z-index will apply.

    A higher z-index means the element will be closer to the viewer so we say this element is on top and vice versa a lower z-index means the element is further away from the user and will be under elements with a higher z-index. However this is not the whole story because once a positioned parent element has a z-index defined (other than auto) then it becomes atomic and its children can never escape from this context. If the parent is z-index: 1 then all its children will not sit on elements outside this context that have a greater z-index than the parent. These child elements may have high-z-indexes but they will only apply in relation to other children of this main parent. It will have no effect outside of the parent's stacking context. This means that an element with a z-index of 10000 will not sit on top of en element that has a z-index of 2 if that other element is outside the current stacking context.

    Another thing to consider is that if the parent is position:relative but has no z-index applied then it is automatically assigned a z-index of auto. This effectively means it ha no stacking level and in this case a child element with a z-index applied will interact with other elements outside this stacking context in the normal way. To muddy the waters a bit more here you should know that ie7 and under don't understand z-index:auto and always apply a z-index of :zero (0) to all positioned elements by default. This makes a positioned element in ie7 and under always atomic and its children always tied to the z-index of the parent.

    Lastly negative z-indexes are allowed but a child element can never be behind the positioned and z-indexed parent's background no matter what the z-index is (older browsers used to get this wrong also but are correct these days).

    Hope that explains it

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Awesome explanation.
    Thank you Paul!

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    just a follow up question to clarify things for me please.

    So if i have ten divs in page but want to assign z-indexes and positioning to three of them...
    7 will be static,not affected as nothing is assigned to them.

    1 will be relative. the parent w/a relative position and a z index. whose default z would be 0
    2 will be absolute. the children will have absolute positions and they can have the z index assigned. child a w/a z of 800 will be lower than child be w/ a z of 9999.

    And the two children can be tweaked or animated by using the positioning and it will not affect the 7 static elements. so while i can give an absolute position to child a i can also on hover change that position and animate it.

    am I correct, did I understand correctly?

    Thank you
    D

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    just a follow up question to clarify things for me please.

    So if i have ten divs in page but want to assign z-indexes and positioning to three of them...
    7 will be static,not affected as nothing is assigned to them.
    If the 7 elements are not nested in a positioned context then the z-index will not affect them.

    1 will be relative. the parent w/a relative position and a z index. whose default z would be 0
    It will only be "0" if you make it so. The default is auto (effectively no stacking level).

    2 will be absolute. the children will have absolute positions and they can have the z index assigned. child a w/a z of 800 will be lower than child be w/ a z of 9999.
    Yes as long as the two elements they are in the same context or if the parent has no z-index defined then they can be separate contexts.

    And the two children can be tweaked or animated by using the positioning and it will not affect the 7 static elements. so while i can give an absolute position to child a i can also on hover change that position and animate it.
    Absolute elements are removed from the flow and have no affect on their parents or other elements. z-index just controls the stacking level of the element and whether it will be above or below another element.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •