Html 图像上绝对定位的链接不可单击
我被z索引和堆叠上下文的问题所困扰。我在图片上创建了绝对链接，但链接不可点击。如果我删除位置：相对；z-index:-10在代码中的第一条规则中，我的问题得到了解决，但通过这种方式，另一个组件出现了故障，一个重叠的菜单，如果你取消了这条规则，它就会被破坏。因此，如果不从根本上消除该规则，我如何解决该问题？ 在我的代码中，在某些部分有很多简化 main[role='main']{ 位置：相对位置； /*这两条规则需要避免在“菜单打开”处于打开状态时出现这种情况*/ z指数：-10； } 食品img演示文稿{ 宽度：100%； } .幻灯片放映{ 位置：相对位置； } .食物名称{ 位置：绝对位置； 显示：块； 左：25%； 右：25%； 最高：24%； 宽度：50%； 字号：2em； } .演示文稿标题svg{ 位置：绝对位置； 排名：0； 右：0； 底部：0； 左：0； 背景色：var colore secondo； 边界半径：2px； } .食物名称文本{ 填充：var colore quarto； } .hashfood-span-1{} .hashfood-span-2{ 字体大小：35.6px； } @支持混合模式：屏幕{ .食物名称{ 混合模式：屏幕； } /*文本标记将根据sovrascrivere la fallback转换为nero*/ .食物名称文本{ 填充：000； } } .幻灯片显示左箭头， .幻灯片放映右箭头{ 位置：绝对位置； 边框：.5px固体白烟； 字号：1.6em； 字体大小：粗体； 文本对齐：居中； 文本阴影：1px 1px 5px； 盒影：1px 1px 5px； ; 宽度：2米； 线高：2米； 最高：50%； 显示：块； 转化：translateY-50%； 光标：指针； 颜色：F5E5； } .幻灯片放映左箭头{ 左：2%； } .幻灯片放映右箭头{ 右：2%； } .幻灯片放映左箭头：：之前{ 内容：“g”； } .幻灯片放映右箭头：：之前{ 内容：“h”； } 文件 意大利1号食品IL NEL食品交付Html 图像上绝对定位的链接不可单击,html,css,z-index,Html,Css,Z Index,我被z索引和堆叠上下文的问题所困扰。我在图片上创建了绝对链接，但链接不可点击。如果我删除位置：相对；z-index:-10在代码中的第一条规则中，我的问题得到了解决，但通过这种方式，另一个组件出现了故障，一个重叠的菜单，如果你取消了这条规则，它就会被破坏。因此，如果不从根本上消除该规则，我如何解决该问题？ 在我的代码中，在某些部分有很多简化 main[role='main']{ 位置：相对位置； /*这两条规则需要避免在“菜单打开”处于打开状态时出现这种情况*/ z指数：-10； } 食品im
因此，您仍然需要删除此处的z索引，并确保菜单位于该索引之上，确保菜单具有非静态的位置，即相对、绝对等。。然后，您应该能够增加菜单的z索引，使其保持在幻灯片上方。因此，您仍然需要删除此处的z索引，并确保菜单位于其上方，确保菜单的位置不是静态的，即相对、绝对等。。然后您应该能够增加菜单的z索引，使其位于幻灯片上方。只需删除z索引：-10；来自.main[role='main'] 在Codepen上检查它的操作： main[role='main']{ 位置：相对位置； } 食品img演示文稿{ 宽度：100%； } .幻灯片放映{ 位置：相对位置； } .食物名称{ 位置：绝对位置； 显示：块； 左：25%； 右：25%； 最高：24%； 宽度：50%； 字号：2em； } .演示文稿标题svg{ 位置：绝对位置； 排名：0； 右：0； 底部：0； 左：0； 背景色：var colore secondo； 边界半径：2px； } .食物名称文本{ 填充：var colore quarto； } .hashfood-span-1{} .hashfood-span-2{ 字体大小：35.6px； } @支持混合模式：屏幕{ .食物名称{ 混合模式：屏幕； } /*文本标记将根据sovrascrivere la fallback转换为nero*/ .食物名称文本{ 填充：000； } } .幻灯片显示左箭头， .幻灯片放映右箭头{ 位置：绝对位置； 边框：.5px固体白烟； 字号：1.6em； 字体大小：粗体； 文本对齐：居中； 文本阴影：1px 1px 5px； 盒影：1px 1px 5px； ; 宽度：2米； 线高：2米； 最高：50%； 显示：块； 转化：translateY-50%； 光标：指针； 颜色：F5E5； } .幻灯片放映左箭头{ 左：2%； } .幻灯片放映右箭头{ 右：2%； } .幻灯片放映左箭头：：之前{ 内容：“g”； } .幻灯片放映右箭头：：之前{ 内容：“h”； } 文件 意大利1号食品IL NEL食品交付 只需删除z指数：-10；从.main[role='main'] 在Codepen上检查它的操作： main[role='main']{ 位置：相对位置； } 食品img演示文稿{ 宽度：100%； } .幻灯片放映{ 位置：相对位置； } .食物名称{ 位置：绝对位置； 显示：块； 左：25%； 右：25%； 最高：24%； 宽度：50%； 字号：2em； } .演示文稿标题svg{ 位置：绝对位置； 排名：0； 右：0； 底部：0； 左：0； 背景色：var colore secondo； 边界半径：2px； } .食物名称文本{ 填充：var colore quarto； } .hashfood-span-1{} .hashfood-span-2{ 字体大小：35.6px； } @支持混合模式：屏幕{ .食物名称{ 混合模式：屏幕； } /*文本标记将根据sovrascrivere la fallback转换为nero*/ .食物名称文本{ 填充：000； } } .幻灯片显示左箭头， .幻灯片放映右箭头{ 位置：绝对位置； 边框：.5px固体白烟； 字号：1.6em； 字体大小：粗体； 文本对齐：居中； 文本阴影：1px 1px 5px； 盒影：1px 1px 5px； ; 宽度：2米； 线高：2米； 最高：50%； 显示：块； 转化：translateY-50%； 光标：指针； 颜色：F5E5； } .幻灯片放映左箭头{ 左：2%； } .幻灯片放映右箭头{ 右：2%； } .幻灯片放映左箭头：：之前{ 内容：“g”； } .幻灯片放映右箭头：：之前{ 内容：“h”； } 文件 意大利1号食品IL NEL食品交付
简单地删除主节点上的z索引应该可以解决这个问题；至少在提供的代码中，它不会扭曲显示。或者，您可以在所需链接上设置更高的z索引。@ObsidManager我已经尝试在所需链接上设置高z索引，但它不起作用。我写的方法是，我不能删除main上的z-index，因为否则，代码的另一个组件（菜单）会与图像重叠，我会遇到严重问题。那么我该如何解决呢？您还没有包含任何在删除z索引时出现问题的代码。代码的其他组件有哪些严重问题？请在问题中包含这些内容，否则我们无法帮助您解决问题。@Obsidiage我已解决。我省略了另一个代码，因为它很长，并且很难重新创建一个最小的工作代码。谢谢。只需删除main上的z索引就可以解决这个问题；至少在提供的代码中，它不会扭曲显示。或者，您可以在所需链接上设置更高的z索引。@ObsidManager我已经尝试在所需链接上设置高z索引，但它不起作用。我写的方法是，我不能删除main上的z-index，因为否则，代码的另一个组件（菜单）会与图像重叠，我会遇到严重问题。那么我该如何解决呢？您还没有包含任何在删除z索引时出现问题的代码。代码的其他组件有哪些严重问题？请在问题中包含这些内容，否则我们无法帮助您解决问题。@Obsidiage我已解决。我省略了另一个代码，因为它很长，并且很难重新创建一个最小的工作代码。谢谢，我也试过了。它可以工作，但在菜单中有另一个绝对定位的链接X来关闭菜单，这样在我关闭菜单时仍然可见menu@Umbert在这种情况下，您确定X close菜单位于菜单容器内吗？因为如果菜单的容器被切换为display:none，那么它里面的所有元素也应该被隐藏，你说X close菜单保持可见意味着它在菜单之外container@Kyojimaru你已经把问题集中起来了。我切换了X关闭菜单的可见性，将z索引从-1更改为1。相反，现在更改display属性以隐藏它，这显然是可行的。上帝保佑你。@Umbert我认为如果菜单和关闭按钮不应该分开，你最好更新一些标记，而不是你有。。。在单独的容器中，最好一起放在一个容器中。。。或者类似的东西，所以你可以只切换菜单容器的显示，而不是单独切换菜单和btn关闭。我也已经尝试过了。它可以工作，但在菜单中有另一个绝对定位的链接X来关闭菜单，这样在我关闭菜单时仍然可见menu@Umbert在这种情况下，您确定X close菜单位于菜单容器内吗？因为如果菜单的容器被切换为display:none，那么它里面的所有元素也应该被隐藏，你说X close菜单保持可见意味着它在菜单之外
container@Kyojimaru你已经把问题集中起来了。我切换了X关闭菜单的可见性，将z索引从-1更改为1。相反，现在更改display属性以隐藏它，这显然是可行的。上帝保佑你。@Umbert我认为如果菜单和关闭按钮不应该分开，你最好更新一些标记，而不是你有。。。在单独的容器中，最好一起放在一个容器中。。。或者类似的，因此，您可以只切换菜单容器的显示，而不是单独执行菜单和btn关闭。我接受您的答案，因为这是解决我描述的问题的最好方法，尽管调整它，就像我在代码中遇到了其他问题一样，我在其他人的帮助下解决了这些问题。我接受您的答案，因为这是最好的方法解决我描述的问题，尽管调整它，就像我在代码中遇到了其他问题一样，我在别人的帮助下解决了这些问题。