javascript 如何设置两个div之间的边距，而一个div作为固定位置？

dbf7pr2w 于 2022-12-17 发布在 Java

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

假设我有两个div，其中绿色div为position fixed，我怎么用它来设置边距？
电流输出
enter image description here
期望输出
enter image description here

JavaScript

来源：https://stackoverflow.com/questions/74801678/how-to-setup-margin-between-two-div-while-one-div-as-fixed-position

2条答案

按热度按时间

ki0zmccv1#

对于您的第一个问题，将这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-17

iaqfqrcu2#

第一个问题：
当标题和侧边栏的位置都固定时，如何在标题顶部显示侧边栏？
答案很简单，您可以使用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-17

我来回答

javascript 如何设置两个div之间的边距，而一个div作为固定位置？

2条答案

相关问题

热门标签

最新问答