html 为什么运尸箱要放在导航台后面？

khbbv19g 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(130)

我正在尝试做following侧边栏funality最小/最大，问题是当我设置位置固定到侧边栏/导航内容落后。
超文本：

<app-side-nav [isExpanded]="sidebarExpanded" (toggleSidebar)="sidebarExpanded = !sidebarExpanded" id="screenLeft" class="screen"></app-side-nav>
<app-navbar id="screenTop" class="screen"></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

问题是如何设置显示所需输出的主体，并且可以使用侧边栏更改大小？

Html

来源：https://stackoverflow.com/questions/74801678/why-body-container-going-behind-navgations

2条答案

按热度按时间

ftf50wuq1#

对于您的第一个问题，将这2个属性top:0px;（从屏幕的0开始）和z-index:99;（堆叠在顶栏上）添加到侧栏id #screenLeft
对于您的第二个问题后，删除侧边栏和顶栏添加此css #content { margin-left: 0; margin-top: 0; }，它将删除边距形式的内容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" class="screen"></div>
<div id="screenTop" class="screen"></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>

赞(0）回复(0）举报 2022-12-16

qmb5sa222#

第一个问题：
当标题和侧边栏的位置都固定时，如何在标题顶部显示侧边栏？
答案很简单，您可以使用z-index = number（例如，z索引= 100），
参考：MDN

z-index CSS属性设置定位元素及其后代的顺序。具有较大z-index的重叠元素覆盖具有较小z-index的重叠元素。

示例代码：

.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;
}

第二个问题：
如果边栏和标题没有显示，我如何在整个屏幕上显示内容div？
您将需要使用一点JavaScript来执行此操作，
将以下代码添加到<body>标记的末尾，
然后根据您的需要进行修改。

<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>

当您显示/隐藏.screen ToggleContent()时，请记住调用该函数

赞(0）回复(0）举报 2022-12-16

我来回答

html 为什么运尸箱要放在导航台后面？

2条答案

相关问题

热门标签

最新问答