Html 如何将模态放在页面的绝对正面？_Html_Css

Html 如何将模态放在页面的绝对正面？

html css

Html 如何将模态放在页面的绝对正面？,html,css,Html,Css,我试图创建一个模态图像。我有一个与主要内容共享网格的粘性侧栏。这是一个固定的图像，所以我可以将其与主要内容分开滚动我添加了一个divbyjavascript，它有一个我想显示为模态的图像。它不能覆盖主要内容，因为如果我将其设置为固定，它会被覆盖，如果我将其设置为绝对，它会跟随主要内容我试图删除所有的css除了模态和位置在作为固定。它仍然隐藏在文档的其余部分后面 <!DOCTYPE html> <head> <meta content="text/html

我试图创建一个模态图像。我有一个与主要内容共享网格的粘性侧栏。这是一个固定的图像，所以我可以将其与主要内容分开滚动

我添加了一个divbyjavascript，它有一个我想显示为模态的图像。它不能覆盖主要内容，因为如果我将其设置为固定，它会被覆盖，如果我将其设置为绝对，它会跟随主要内容

我试图删除所有的css除了模态和位置在作为固定。它仍然隐藏在文档的其余部分后面

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content = "utf-8">
    <link rel = "stylesheet" href="assets/styles.css"> 
    <title>
        Images
    </title>
</head>
<body>
    <div class="container">
            <div>
                <ul id="foldersList">
                </ul>

            </div>
                <div id = imageDisplay>
                <!--I add a grid of thumnail images here if that affects anything-->
            </div>
    </div>
<div class="canvas"><!--This is added through javascript and what I want to put in the front-->
    <img src=""/>
</body>

<script src="jquery-3.4.1.min.js"></script>
<script src="imageLoader.js">

</script>

</html>

尝试将z索引设置得更大可能会解决您的问题

.canvas {
    z-index: 1000;
}

我解决了这个问题。我将这些添加到.canvas：

.canvas{
排名：0；
左：0；
浮动：左；
z指数：1；
宽度：100%；
高度：100vh；
背景色：rgba（53,53,53,0.7）；
位置：绝对|固定；
}

这不会影响它。它仍然会隐藏在其他元素后面。您是否有在线工作示例来重现您的问题？您的代码包含一些可能导致问题的css和js文件。不，这只在本地计算机上运行。我确实通过使用

位置：fixed

解决了这个问题。但是，我不知道为什么这种组合会起作用，因为侧边栏是绝对的，模态是固定的。这不是位置变化，我使用了

top:0

和

left:0