WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty twelve and z-index property (12 posts)

  1. ChrisColston
    Member
    Posted 1 year ago #

    I'm trying to overlap the default sidebar on top of the header. It displays fine but all links are redundant (the header div is still on top although i can see the sidebar. I've tried setting the positioning and z-index but to no avail

    any thoughts?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you post the z-index and any relevant position CSS styles you've tried?

  3. ChrisColston
    Member
    Posted 1 year ago #

    One of the many iterations (this example doesn't overlay)

    #branding hgroup{
    background-image: url("");
    background-size:60%;
    background-repeat:no-repeat;
    height:200px;
    position:relative;
    z-index:99;
    }
    #secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
    margin-top:-200px;
    z-index:100;
    
    }

    thanks

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is your website local to your machine or can you link it?

  5. ChrisColston
    Member
    Posted 1 year ago #

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    all links are redundant

    I'm not experiencing this, which links are redundant?
    Which browser & browser version are you using?

  7. ChrisColston
    Member
    Posted 1 year ago #

    Sorry, if you could refresh now you should see what i mean

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    When using z-index, you need to apply position: relative (or absolute) to the parent of the elements you want to apply to.

    So you ought to apply position: relative; to <div id="page">.
    You also should apply a z-index value lower in the <header> element, than the z-index value in the sidebar element.

  9. ChrisColston
    Member
    Posted 1 year ago #

    ok so I've now got:

    #page {
    	margin: 0em auto;
    	max-width: 1000px;
    background-image:url();
    background-size:100%;
    background-repeat:no-repeat;
    position: relative
    }
    #branding hgroup{
    background-image: url("");
    background-size:60%;
    background-repeat:no-repeat;
    height:200px;
    position: relative;
    z-index:99
    
    }
    #secondary {
    	float: right;
    	margin-right: 7.6%;
    	width: 18.8%;
    margin-top:-200px;
    position: relative;
    z-index:100;
    
    }
  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Instead of #branding hgroup, you should apply the z-index to #branding because at the moment there is a z-index of 9999 applied.

  11. ChrisColston
    Member
    Posted 1 year ago #

    Totally missed that, Thanks so much Andrew

  12. ChrisColston
    Member
    Posted 1 year ago #

    thanks

Topic Closed

This topic has been closed to new replies.

About this Topic