Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with 'position: fixed ' elements

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #165925
    oblekta
    Participant

    Hey everyone,

    I am currently developing a digital magazine for a client. The index (table of contents) is fixed at the bottom (which you can open/close) This is a design choose, but I am currently struggling with the following:

    I want the index to be always shown at the bottom, the problem is that on the cover page I am using a full page background with some content. I somehow want to force an element to be always shown even when the index is fixed @ the bottom.

    In case my explanation is a bit unclear, I have made a fiddle for this question. Just make your browser smaller to see the results: http://jsfiddle.net/3h8T2/

    Does anyone have a idea to solve this? I have the feeling the solution is pretty simple, just can’t seem to figure it out at the moment.

    #165927
    Atelierbram
    Participant

    And if you would give the last element of the page a large amount of padding ( about the max-height of the fixed-positioned index ) ?

    
    aside {
     padding-bottom: 10em;   
    }
    
    #165928
    oblekta
    Participant

    Hey Atelierbram,

    Thank you for your respond. Sadly that isn’t the solution I am looking for.

    I want the article element to be unaffected by the index/table of contents element.

    #165930
    Atelierbram
    Participant

    Let’s try to make this clear. Do you mean you want your article to ‘never-be-overlayed’ by the fixed-positioned element?

    #165931
    oblekta
    Participant

    Yes, that is correct! :)

    #165932
    Atelierbram
    Participant

    With all respect, isn’t this ‘wanting to have your cake and eat it too’ , because you still want the fixed-positioned element, but you don’t want it to overlay any element, even not when this is just natural behaviour of a webpage with scrolling up in the browser?

    #165933
    oblekta
    Participant

    You are correct. I find it hard to explain what I mean, but I have thought of a couple of things. I will try them out later on. Thanks for your help though!

    #165973
    paulob
    Participant

    Hi,

    I’m not sure if this what you meant but it uses flexbox (modern browsers only) to create a fixed effect at the bottom while allowing the top section to soak up the remainder.

    #166259
    Chris Coyier
    Keymaster

    I’m with @Atelierbram on this one. If the index is under the article then you will never see it. Is your goal to click a button to display it? If that’s the case then just set the height of the index div to 0px and when they click on the button set the height to 100px (or whatever you want).

    Do you have a mockup or something you can show?

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.