Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 12, 2018 at 7:25 pm #984853
    TheINNERface

    Hello, could you kindly show me how to “overlap” two ‘Colour Sections’?
    I understand how to do it with a regular Column via the Custom Top and Bottom margin controls…however I need the ability to overlap the back ground image of two separate Colour Sections respectfully …while containing other info in the columns within that Colour sections. Is this possible?
    Please note..
    I’ve tried several CSS techniques to no avail… Although perhaps I’m doing it wrong?? Could you please advise..
    FYI.. I’ve labeled my colour section ID ‘overlap’
    Below that in the Custom CSS Class section .. I’ve placed in the following CSS ( I also tried ‘Padding’ )
    {
    margin-bottom: 25px;
    }

    And then I placed this in the general CSS section..

    #overlap .content {
    margin-bottom: 25px;
    }
    Is this correct.. ?..should I be including the ‘.content’ in this case.

    Any help is appreciated.

    thanks
    Sean

    • This topic was modified 6 years, 7 months ago by TheINNERface. Reason: Moved website link
    July 15, 2018 at 1:46 am #985531
    Mike

    Hey TheINNERface,
    I believe what you are looking for is “z-index”
    In this case I would make your page background transparent, which then shows a green that is your document background that we will make white, this is now the background color of your lowest level “z-index: 0;” which we will set your #topbanner_1 to.
    Then we will make your #overlap “z-index: 5;” and your #overlap2 “z-index: 10;” your very last color section has the same name as your second one, so I can’t make it “z-index: 15;”
    Please notice that we are using negative “margin-top” to move the sections up. Please try this css & adjust to suit:

    .main_color {
background-color: transparent !important;
}
#wrap_all,#main {
    background-color: #fff !important;
}
#topbanner_1 {
    position: relative !important; 
    z-index: 0 !important;
}
#overlap {
    margin-top: -50px !important; 
    position: relative !important; 
    z-index: 5 !important;
}
#overlap2 {
    margin-top: -50px !important; 
    position: relative !important; 
    z-index: 10 !important;
}

    Here is another solution to try: Stacking without the z-index property

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.