Making an absolute element appear below a fixed element-CodePudding

I am having issues with my website where my fixed header is appearing above an absolute paragraph here.

Is there any way I could fix this?

CodePudding user response：

@matt-croak's solution will work in your case. Here's some good to know CSS fundamentals of positioning - when you use position: absolute for an element, the positioning attributes like top left right and bottom rely on the nearest parent element that has it's position set to relative.

Make sure you create a wrapping div for all of your elements other than the topbar and set position: relative on the wrapper.

Subsequently, all the elements within the wrapper div will use it as a reference for positioning.

CodePudding user response：

In your CSS add z-index: 10; to your #headerback div.

#headerback{
    background-color: #430A6C;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    z-index: 10;
}

z-index manages the stacking context of elements. If you want something to appear in a higher context (meaning above other elements) then give the z-index a higher number. 0 is default.