z-index 相关问题

当用户点击它时，将可拖动的 div 带到 React.js 的前面

我想在单击或拖动它时将可拖动的框带到前面。 我事先不知道此类框的最大数量，因为我有一个按钮可以在...

导航栏 Z 索引不适用于 Alice Carousel

我有我的顺风商店导航栏和用于幻灯片更改的爱丽丝轮播，但桌面视图的下拉导航栏不会出现在爱丽丝轮播上方，它出现在爱丽丝轮播下方。 我...

需要父级div位于子级之上，React和tailwind，

这个motion div是一个侧边栏，而菜单项是一个类别，该类别打开另一个侧边栏嵌套第一个，但第二个侧边栏位于父级之上，帮助。 这个motion div是一个侧边栏，菜单项是一个类别，该类别打开另一个侧边栏嵌套第一个，但第二个侧边栏位于父级之上，帮助。 <AnimatePresence mode="wait" initial={false}> {open && ( <> <motion.div {/* this is the white sidebar */} {...framerSidebarPanel} className="w-[391px] bg-white absolute left-0 top-[127px] py-12 h-screen z-50 shadow-side" ref={overlayRef} > <MenuItem text={text.fon} expanded={1} sub={fonSubCategories} /> // children </motion.div> <motion.div {...framerSidebarBackground} className="w-full bg-black/50 absolute left-0 top-[127px] h-screen z-10" ></motion.div> </> )} </AnimatePresence> 向下是MenuItem组件 <div className="relative h-[63px] my-2 py-1 hover:bg-zinc-100 flex items-center text-xl text-blue-400 hover:text-cyan-700 font-semibold leading-tight "> <div className="flex gap-28 items-center absolute right-10"> <div className="min-w-[130px]">{text}</div> <ArrowForwardIosIcon sx={!sub && { opacity: 0 }} /> </div> {/* this red div is above the white sidebar */} {isExpanded && <div className="w-[391px] h-20 bg-red-200 absolute top-0 left-[200px] -z-10"></div>} </div> 我需要子元素上方的父元素 你尝试过使用 z-index 吗？ <AnimatePresence mode="wait" initial={false}> {open && ( <> <motion.div {...framerSidebarBackground} className="w-full bg-black/50 absolute left-0 top-[127px] h-screen z-10" ></motion.div> <motion.div {...framerSidebarPanel} className="w-[391px] bg-white absolute left-0 top-[127px] py-12 h-screen z-50 shadow-side" ref={overlayRef} > <MenuItem text={text.fon} expanded={1} sub={fonSubCategories} /> </motion.div> </> )} </AnimatePresence> <div className="relative h-[63px] my-2 py-1 hover:bg-zinc-100 flex items-center text-xl text-blue-400 hover:text-cyan-700 font-semibold leading-tight "> <div className="flex gap-28 items-center absolute right-10"> <div className="min-w-[130px]">{text}</div> <ArrowForwardIosIcon sx={!sub && { opacity: 0 }} /> </div> {isExpanded && ( <div className="w-[391px] h-20 bg-red-200 absolute top-0 left-[200px] z-40"></div> )} </div>

即使设置了 z 索引，Div 轮廓也被覆盖

我正在尝试创建一个数独网格，由 3x3 网格中的 9 个框组成，每个框包含 3x3 网格中的 9 个单元格。然而，盒子的轮廓被其他单元格的轮廓覆盖

如何在 ion-tabs 后面打开模态框 [ IONIC 4 ]

如何显示选项卡后面的模式？ 目前，即使 z-index 设置为 2 并且选项卡的 z-index 设置为 5，模式也会重叠所有内容。 目前情况如何 我多么希望它...

将元素放置在网站的背景和内容之间

我有以下布局： 世界你好！ .bg{ 背景：绿色； } ....

如何为内部div添加z-index

我正在创建一个表单，其中添加图标，当用户将鼠标悬停在图标上时，该图标说明了该字段。 下面是我的代码和CSS： .工具提示{ 位置：相对； 显示：内联块； 哦...

标题上的 Z 索引不起作用，尽管所有 div 都已设置位置

我有一个简单的反应组件。标题有一个 div，页面其余部分有一个 div。标题的 div 具有固定位置，而正文的 div 的位置设置为相对...

我的span css样式在背景图片后面

我的 span 的 css 样式将其放置在背景图像后面，当我更改 span 的 z-index 时，它会覆盖按钮中的文本。 另外，更改 .banner 中的背景图像 z-index 不会改变...

CSS：如何消灭/剪辑下面的元素？标题

标题 ＃A { 位置：相对...</desc> <question vote="-2"> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;UTF-8&#34;&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #a { position: relative; } #a div { width: 100px; height: 100px; position: absolute; } #b { background-color: green; left: 0; top: 0; } #c { left: 20px; top: 20px; background-color: red; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;a&#34;&gt; &lt;div id=&#34;b&#34;&gt;&lt;/div&gt; &lt;div id=&#34;c&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>在此示例中，有两个彼此重叠的矩形。红色的像素实际上是透明的，但应该删除绿色像素截取的像素。警告：将第二个设置为纯白色不会被接受为有效的解决方案 - 它实际上必须删除这些像素。</p> <p><a href="https://i.stack.imgur.com/r4FkP.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL3I0RmtQLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>我不太清楚你的问题，但我认为你的答案是在CSS中的混合模式</p> <p>只需尝试以下 css 代码和其他混合模式属性</p> <pre><code>#a { position: relative; } #a div { width: 100px; height: 100px; position: absolute; } #b { background-color: green; left: 0; top: 0; z-index: 0; } #c { left: 20px; top: 20px; background-color: red; mix-blend-mode: multiply; } </code></pre> </answer> <answer tick="false" vote="0"> <p>使用面膜</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>#a { position: relative; } #a div { width: 100px; height: 100px; position: absolute; } #b { background-color: green; left: 0; top: 0; -webkit-mask: conic-gradient(from 90deg at 20px 20px,#0000 25%,#000 0) }</code></pre> <pre><code>&lt;div id=&#34;a&#34;&gt; &lt;div id=&#34;b&#34;&gt;&lt;/div&gt; &lt;div id=&#34;c&#34;&gt;&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

如何使 z-index 在不同的树级别上工作且位置相对于父级？

我正在努力解决位置问题，我有一个滑块，在每张幻灯片上我都有一个背景，一个文本和理发图像，当你滑动空切时，滑块外面（绝对）有一张秃头的脸。 ..

Z-index 不适用于父元素，如何解决这个问题？

假设我有这样的布局： 首先 假设我有这样的布局： <body> <main class="main"> <div class="aside-section">first</div> <div class="section">second</div> </main> </body> CSS 是这样的： .main { display: flex; padding: 30px; background: rgba(0, 0, 0, 0.8); position: relative; z-index: 10; } .aside-section { width: 50%; padding-left: 150px; height: 90vh; position: fixed; background: green; } .section { margin-left: 50%; width: 50%; height: 90vh; background-color: yellow; } main z-index 不起作用，并且 aside-section 和 section 出现在其顶部。我不知道如何解决这个问题以及为什么会发生这种情况。我该如何解决它？ 您遇到的问题源于位置：.aside-section 类中的固定规则。固定位置的元素从正常文档流中取出并相对于视口定位。因此，它创建了一个新的堆叠上下文，这意味着它的 z-index 及其子级的 z-index 与其父级的堆叠上下文分开考虑。 .main { display: flex; padding: 30px; background: rgba(0, 0, 0, 0.8); position: relative; z-index: 10; } .aside-section { width: 50%; padding-left: 150px; height: 90vh; position: fixed; background: green; z-index: 9; } .section { margin-left: 50%; width: 50%; height: 90vh; background-color: yellow; z-index: 8; } 现在，由于它们各自的 z-index 值，堆叠应该是 .section 在底部，.aside-section 在其上方，.main 在最顶部。 此外，请确保 .main 的父元素不具有除 static 和 z-index 集以外的位置值，因为这些元素可能会创建一个新的堆栈上下文，从而干扰所需的堆栈顺序。 我创建了一个代码片段来演示您粘贴的代码。 我不太明白你想要实现的目标，但我可以说position:fixed使用起来有潜在危险，所以在决定保留它之前我会确保你真的想要它并理解它. .main { display: flex; padding: 30px; background: rgba(0, 0, 0, 0.8); position: relative; z-index: 10; } .aside-section { width: 50%; padding-left: 150px; height: 90vh; position: fixed; background: green; } .section { margin-left: 50%; width: 50%; height: 90vh; background-color: yellow; } <body> <main class="main"> <div class="aside-section">first</div> <div class="section">second</div> </main> </body>

我想在 postgrest 中创建多列。我想过滤多列

如果客户现在将过滤器放入查询结果中，则非常慢。 我是否需要在单个索引或单个列中的所有过滤器列上创建索引。最大的问题是排序。 下面是

如何重命名 pandas 数据框索引列并将其打印在与列标题相同的行/行上？

当我重命名数据框的索引列时，它不会打印在与列标题相同的行上。如何解决此问题，以便索引列标题与其他列标题打印在同一行？

如何在背景（标题）上获得缩写名称和图片，同时不移动除图片和文本之外的任何内容？

所以基本上我在尝试将图像、文本和背景颜色放在某个位置时遇到了问题。但当我移动其中一个时，另一个就会向下移动。他们不在一个班所以...

MatchedGeometryEffect 给出不良的 ZIndex 结果

在 SwiftUI 中，我在 ZStack 中创建了 2x2 颜色网格。我想单击一种颜色并在我的 ZStack 中使用 .matchedGeometryEffect 将其扩展为 DetailView，而不具有任何透明度......

父子 z-index 问题（容器内）

我的孩子没有出现在我的父母上方，即使它的 z-index 比父母更高，我也遇到了问题。两个图像都出现在“检查”>“元素”中，因此我确信这不是这个问题。

HTML / CSS 隐藏/显示页面对象，无需 JavaScript 切换开关

如何使用单个功能来切换多个按钮/图像。这是我现在的演示。它仅适用于单个按钮/图像，但我需要进行多个控制。 身体， html{

使用“z-index: 1”将“margin”属性设置为“fixed”元素

有一个列表和一个评论字段。评论字段固定在页面底部。当列表很长时，应用页面滚动。我希望列表的底部始终与...

使用lightbox2后点击图像菜单时出现

这是我想要显示图像的代码。我正确链接了灯箱 css 和 js 并且它可以工作，但是当显示图像时，它带有我不想要的菜单栏。 这是我想要显示图像的代码。我正确链接了灯箱 css 和 js 并且它可以工作，但是当显示图像时，它带有我不想要的菜单栏。 <div class="carousel-item <?php echo $isActive ? 'active' : ''; ?>"> <a href="<?php echo $photo['filepath']; ?>" data-lightbox="product-photos"> <img src="<?php echo $photo['filepath']; ?>" alt="Product Image" style="width: 200px; height: 200px;"> </a> </div> 为了更好地理解，我附上了它的屏幕截图。谁能帮我这个。谢谢你。