z-index 相关问题

我正在尝试设置 z-index 值来堆叠我的元素，但奇怪的是，位置内的 2 个元素：固定父级根本不监听 z-index 值。这是我的 HTML：我正在尝试设置 z-index 值来堆叠我的元素，但奇怪的是该位置内的 2 个元素：固定父级根本不监听 z-index 值。这是我的 HTML： <button class="btn support-bubble"> <ul class="list-group gap-3 gap-md-2 mb-3 mb-md-2"> <li class="list-group-item" data-bs-placement="left" data-bs-toggle="tooltip" data-bs-title="AI Whatsapp Assistant"> <i class="fa-regular fa-robot"></i> </li> <li class="list-group-item" data-bs-placement="left" data-bs-toggle="tooltip" data-bs-title="Whatsapp Support"> <i class="fa-brands fa-whatsapp fa-lg"></i> </li> <li class="list-group-item" data-bs-placement="left" data-bs-toggle="tooltip" data-bs-title="Live-chat Interface"> <i class="fa-regular fa-comments"></i> </li> </ul> <div class="animate__animated animate__pulse animate__infinite"> <i class="fa-duotone fa-solid fa-circle-info" style="--fa-primary-color: #38501f; --fa-secondary-color: #38501f;"></i> </div> </button> 这是我的 CSS： .support-bubble { z-index: 800; position: fixed; bottom: 25px; right: 30px; border: none; cursor: default !important; font-size: 60px; } .support-bubble>div { position: relative; z-index: 2; } .support-bubble .list-group { position: relative; z-index: -1; cursor: default; opacity: 0; max-height: 0; transition: opacity 0s linear 0.35s, max-height 0s linear 0.35s; } .support-bubble:focus-within .list-group { transition: none; opacity: 1; max-height: 300px; } .support-bubble .list-group-item { position: relative; cursor: pointer; opacity: 0; border: none; border-radius: 50%; width: 50px; height: 50px; padding: 0; margin: auto; display: grid; place-items: center; font-size: 24px; color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)); background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)); outline: 1px solid rgb(var(--bs-danger-rgb)); transition: opacity 0s linear 0.35s, max-height 0s linear 0.35s; } .support-bubble .list-group-item::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; opacity: 0; content: ''; box-shadow: 0 0 8px rgb(var(--bs-danger-rgb)); transition: opacity 0.3s ease; } .support-bubble .list-group-item:hover::after { opacity: 1; } .support-bubble:focus-within .list-group-item { opacity: 1; } 我认为这里粘贴的内容超出了必要的范围，如果我理解正确的话，在 css 上，前 3 个选择器是导致问题的选择器。 tl：博士家长是： position: static; z-index: 800; 第一个孩子是： position: relative; z-index: -1; 第二个孩子是： position:relative; z-index: 2; 但不知何故，第一个孩子的孩子在第二个孩子的孩子之上。我尝试过添加 .support-bubble .list-group-item *::before, .support-bubble .list-group-item * { position: relative; z-index: -1; } 给第一个孩子，还添加了 .support-bubble>div *, .support-bubble>div { position: relative; z-index: 400; } 所以我确保第一个孩子的所有孩子都有 z-index：-1，第二个孩子的所有孩子都有 z-index：400。我被困在这里了。引用MDN WebDocs：对于定位框（即，具有除静态之外的任何位置），z-index 属性指定：所以这不是一个错误，而是没有按照官方规范工作！只需给父级 position: relative 本身没有影响，并且除了 static 之外还有其他东西。 z-index 之后就可以工作了。

css z-index

回答 1 投票 0

CSS 动画导致 z-index 问题

我的 main.js 文件中有一个奇怪的冲突。我在“.main-headline--left”上运行淡入动画 $('.main-headline--left').addClass('哇动画fadeInUp'); 这很好用，但是当我...

javascript google-chrome z-index css-animations

回答 5 投票 0

如何在 V-Dialog 上方显示 V-Alert

我有一个全局 v-alert，用于显示错误消息或信息，但是在 v-dialog 中，当我尝试显示隐藏在其后面的警报时。我尝试过使用海拔并在 v-

css vue.js vuetify.js z-index

回答 1 投票 0

如何在 React Native 中模拟不传递 zIndex？ (A > B > C > A)

我正在尝试创建这种效果，可以在 Spotify UI 中找到：看起来有以下几个组成部分：家长（黑色）孩子（粉红色）我正在尝试创建这种效果，可以在 Spotify UI 中找到：好像有以下几个组件：家长<View>（黑色）孩子<View>（粉红色） <Text> <Image> 问题是，他们如何使这项工作在 zIndex 方面有效？父级<View>出现在<Image>上方 - “P > I” <Image>出现在孩子上方<View> - “I > C” 子项<View>出现在父项<View>上方 - “C > P” 这使得我们有 P > I > C > P，所以 P > P 这对于普通数字是不可能的，就像 zIndex 设置的那样。这种属性称为“不及物性”，出现在“剪刀石头布”游戏中，其中 R > S > P > R。尽管如此，Spotify 还是设法实现了这一目标。有人知道如何实现这一目标吗？也许 React Native 使用特定于层次结构的 zIndex 而不是全局 zIndex 的事实可能会有所帮助？也许你不应该使用 z-index。我认为使用背景就足够了。 import React from 'react'; import { View, Text, Image, StyleSheet } from 'react-native'; const MusicCard = () => { return ( <View style={styles.container}> <Text style={styles.title}>Muzyka</Text> <Image source={{ uri: 'https://path-to-your-image.png' }} // replace with your image path style={styles.image} /> </View> ); }; const styles = StyleSheet.create({ container: { backgroundColor: '#d21b78', // pink background color padding: 20, borderRadius: 10, margin: 20, height: 200, justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative', }, title: { fontSize: 24, fontWeight: 'bold', color: '#fff', }, image: { width: 100, height: 150, position: 'absolute', bottom: 10, right: 10, transform: [{ rotate: '-10deg' }], }, }); export default MusicCard;

css react-native z-index spotify

回答 1 投票 0

z-index 相关问题

最新问题