Why body container going behind navgations?-CodePudding

I am try to do following sidebar funality min/max, issue is when I am setup position fixed to sidebar / nav content going behind.

HTML :

<app-side-nav [isExpanded]="sidebarExpanded" (toggleSidebar)="sidebarExpanded = !sidebarExpanded" id="screenLeft" ></app-side-nav>
<app-navbar id="screenTop" ></app-navbar>

<div id="container">
    
    <div id="content">
        <router-outlet></router-outlet>
    </div>
    
</div>

CSS:

.screen {
    position: fixed;
    left: 0;
}
#screenTop {
    height: 100px;
    width: 100%;
    
    z-index:9;
    
}
#screenLeft {
    height: 100%;
    width: 100px;
    //top:100px; 
    z-index:10;
    top: 0;
}

Current Output

Desire Output

Question is How can I setup body that diplay like desire output, also that it can chnage size with sidebar?

CodePudding user response：

For your first Question add these 2 properties top:0px;(to start form to 0 of screen) and z-index:99; (to stack over the topbar) to sidebar id #screenLeft

For your 2nd Question after removing sidebar and top bar add this css #content { margin-left: 0; margin-top: 0; } it will remove margin form content div.

.screen {
    position: fixed;
    background: black;
}
#screenTop {
    height: 100px;
    width: 100%;
    background: green;
}
#screenLeft {
    height: 100%;
    width: 100px;
    top:0;
    z-index:99;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }


#content {
    margin: 100px;
}

<div id="screenLeft" ></div>
<div id="screenTop" ></div>



<div id="container">
    
    <div id="content">
        Test Possition of Text and whatnot1<br />
        Test Possition of Text and whatnot2<br />
        Test Possition of Text and whatnot3<br />
        Test Possition of Text and whatnot4<br />
                  

    </div>
    
</div>

CodePudding user response：

First question:
How can I show sidebar on top of header while both are positioned fixed?

simple answer, you can use z-index = number (z-index = 100 for example),
reference: MDN

The z-index CSS property sets the order of a positioned element and its descendants. Overlapping elements with a larger z-index cover those with a smaller one.

example code:

.screen {
    position: fixed;
    start: 0;
}
#screenTop {
    height: 100px;
    width: 100%;
    top: 0;
    z-index:10;
}
#screenLeft {
    height: 100%;
    width: 100px;
    top:100px; /*To Prevent Overlapping*/
    z-index:9;
}
#content{
    margin: 50px;
}

Second question:
How can I show content div in whole screen if sidebar & header display is none?

You will need to use a little javascript to perform this,
Add the following code before the end of your <body> tag,
then modify it for your needs.

<script>
    function ToggleContent()
    {
        let screenTopDisplay = document.getElementById("screenTop").style.display;
        let screenLeftDisplay = document.getElementById("screenLeft").style.display;
        
        let toggleMargin =
            (screenTopDisplay = "" || screenTopDisplay = "block") && (screenLeftDisplay = "" || screenLeftDisplay = "block");
        
        let container = document.getElementById("container");
        
        if(toggleMargin)
        {
            container.style.margin = "100px 0px 0px 100px";
        }
        else
        {
            container.style.margin = "0px";
        }
    
    }
</script>

*remember to call the function when you show/hide the .screen ToggleContent()