Help about css3 positioning properties

Question

I am creating an web template, so i created an header with positioning property fixed.. After that i created an menu with some transformations which requires positioning property as absolute.. And i created an image slider with the help of css and html and i used positioning property as relative... Now the main problem is when i scroll down the page navigation menu and image slider get over on header(i mean header contents goes beneath the menu and image slider) except them all my content works fine so please tell me any alternative option of using position property absolute or relative/how to fix this problem.
Ps: i don't want to use any kind of Javascript in this web template.
https://code.sololearn.com/WXMPZn6u9Er2/?ref=app

Okey this is the code of web template i am working on it this code is in start stage please view this code in computer
View the problem with header, menu and imageslider.

Answer 1

Thanks for including the code! 🙂

Try adjusting the z-index of your nav with respect to its contextual stacking order or the z-index of your header with respect to its contextual stacking order.

https://css-tricks.com/almanac/properties/z/z-index/

Answer 2

Share your Code:
So we can understand ur question and help u

Answer 3

The description doesn't make sense, so we would need to see the code. Generally speaking, you would relative position the outer (parent) div and absolute position the inner (immediate child) div. Not sure what that would have to do with the slider without seeing the code.

Please provide a link to your Code Playground code (water molecule icon in the upper right) in this thread so we can help you troubleshoot the specific issues you are running into.

Answer 4

float property is used for position ..

Answer 5

Thanks you Janning⭐ for your help but i found an single way to solve this problem... And i have changed following things:-
Header:before{
Position:absolute ;
}
Header:after{
Position:absolute;
}
Logo{
Position:absolute;
}
I know after those changes header element's positioning properties changes to absolute and content is not sticky at top but i found this single way to solve this problem but if anyone have better suggestions then please tell me because i want to make my header contents sticky.
samir sheikh can you tell which language you want to code on pc..?

Answer 6

himanshu surolia

I'm glad you were able to solve your own issue. I remember seeing that part of your code, so maybe I just didn't understand (and probably still don't understand) what the desired end result is. "position: sticky;" is something you can use, but again, I'm still not sure where this is supposed to be going, so I'll just continue to cheer you on since it sounds like you'll figure it out on your own eventually anyway. 😁

Answer 7

hey bro you know about google Android developer son in this which codes are use and how to use this code means how to type this all in PC? plz tell me I want to learn