javascript - Tooltip 组件渲染但不可见，并且不是 z-index

Question

import React, {useState, useEffect} from "react";

// The tooltip component is used for the Tooltip feature that is utilized 
const Tooltip = (couponProps) => {
    const { couponTheme, verticalMousePosition, data, showTooltip, isSwiper } = couponProps;
    const { TooltipText } = data;
    const [tooltipStyles, setTooltipStyles] = useState({display: 'none'});
    const [tooltipArrowStyles, setTooltipArrowStyles] = useState({display: 'none'});
    const { TooltipTextColor, TooltipBackgroundColor, TooltipFontSize } = couponTheme;

    // The useEffect hook will first define all the tooltip styling as objects. If the showTooltip variable defined in the parent element is active, render the tooltip.
    useEffect(() => {
        const topTooltipStyles = {
            bottom: '130%',
            left: '20%',
            right: '20%',
            width: '60%'
        }
    
        const topTooltipArrowStyles = {
            top: '100%',
            left: '50%',
            marginLeft: '-5px',
            borderColor: (TooltipBackgroundColor || 'black') + ' transparent transparent transparent',
            marginTop: 'unset'
        }
    
        const bottomTooltipStyles = {
            top: '125%',
            left: '20%',
            right: '20%',
            width: '60%'
        }
    
        const bottomTooltipArrowStyles = {
            bottom: '100%',
            left: '50%',
            marginLeft: '-5px',
            borderColor: 'transparent transparent ' + (TooltipBackgroundColor || 'black') + ' transparent'
        }

        if (showTooltip) {
            // The tooltip is configured to either render at the top of the interval bar or at the bottom of the interval bar. That is pased on where the mouse is located on the screen.
            let tooltipPositionStyles = {};
            let tooltipArrowPositionStyles = {};
            // If the vertical mouse position is less than 250px to the top, render the tooltip at the bottom under the parent componet. This means the user is at the top of the screen, so use the bottom styling.
            if (verticalMousePosition < 250 || isSwiper) {
                // This way, the tooltip will not be cut of from the top of the screen.
                tooltipPositionStyles = bottomTooltipStyles;
                tooltipArrowPositionStyles = bottomTooltipArrowStyles;
            // Else, that means the user is not at the top of the screen
            } else {
                tooltipPositionStyles = topTooltipStyles;
                tooltipArrowPositionStyles = topTooltipArrowStyles;
            }

            const tooltipArrowStylesObj = {
                content: ' ',
                position: 'absolute',
                borderWidth: '5px',
                borderStyle: 'solid',
                ...tooltipArrowPositionStyles
            }
            
            const tooltipStylesObj = {
                position: 'absolute',
                color: TooltipTextColor || 'white',
                background: TooltipBackgroundColor || 'black',
                padding: '10px',
                borderRadius: '10px',
                zIndex: '5000',
                textAlign: 'center',
                ...tooltipPositionStyles
            }

            // Set all of the arrow styles after determining if the tooltip is on top or on bottom.
            setTooltipArrowStyles(tooltipArrowStylesObj);
            setTooltipStyles(tooltipStylesObj);

        } else {
            // If the showTooltip variable is false, hide the tooltip.
            setTooltipArrowStyles({});
            setTooltipStyles({display: 'none'});
        }
    }, [showTooltip, verticalMousePosition, TooltipBackgroundColor, TooltipTextColor, isSwiper])

    return (
        <>{TooltipText !== undefined && TooltipText.trim() !== '' && TooltipText !== 'None' && TooltipText !== 'Inset Tooltip Text Here' && showTooltip ? 
            <div className='TooltipDiv' style={tooltipStyles}>
                <span className="ToolTipText" style={{fontSize: TooltipFontSize || '12px'}}>{TooltipText}</span>
                <span className="ToolTipArrow" style={tooltipArrowStyles}></span>
            </div> 
        : null}</>
    );
}

export default Tooltip;

因此，代码将垂直鼠标位置作为 Prop 传递，如果鼠标距离页面顶部 250 以内，则工具提示将呈现在悬停的组件下方。如果组件呈现在上方并且鼠标位于页面下方，则一切正常，因为上方没有任何东西可以阻挡工具提示，但是当组件呈现在下方时，使用底部工具提示样式，它是绝对定位的，但问题是它呈现在另一个后面零件。我的直觉说这显然是 z-index，但是这个工具提示的 zIndex 为 5000，明显大于页面上的下一个最大 z-index 60。检查谷歌浏览器开发工具，样式都合适，组件渲染，但无论我做什么，它仍然以某种方式落后/隐藏在另一个组件后面。任何想法将不胜感激!提前致谢!
所以我的问题也可以这样问，“是否有一个 css 属性会导致一个元素在另一个具有任意高 z-index 的元素之上渲染？”

Answer 1

z-index 的大部分问题与“堆叠上下文”有关。
元素堆叠在 z-axis在他们的堆叠上下文中。
没有 position 的元素或显式 z-index值都共享相同的堆栈上下文，并在呈现的 HTML 中按出现顺序呈现。
这里有一些具体的z-index与可能影响您的堆叠上下文相关的问题:
1. z-index 仅适用于定位元素
也就是说，position: absolute , position: relative , position: fixed , 或 position: sticky ) 和 flex 元素。 [1]
因此，首先，确保要在 z 轴上定位的元素都已明确定位。
2.一些css属性可以将一个元素移动到一个新的堆叠上下文中。
一些常见的是opacity和 transform . Here is a list of CSS properties这可能会影响堆叠上下文。
以下是关于不透明度值如何影响堆叠上下文的详细说明:

Since an element with opacity less than 1 is composited from a singleoffscreen image, content outside of it cannot be layered in z-orderbetween pieces of content inside of it. For the same reason,implementations must create a new stacking context for any elementwith opacity less than 1. If an element with opacity less than 1 isnot positioned, then it is painted on the same layer, within itsparent stacking context, as positioned elements with stack level 0. Ifan element with opacity less than 1 is positioned, the ‘z-index’property applies as described in [CSS21], except that if the usedvalue is ‘auto’ then the element behaves exactly as if it were ‘0’. [2]

要解决这些问题，请显式设置 position和 z-index以便它们将相对于其他定位元素进行评估。
3. 如果设置了元素的父 z-index(和位置)，则该元素的 z-index 将仅适用于父元素。
换句话说，父元素是堆叠上下文。
要解决此问题，您可以修改 HTML 层次结构，或删除父级的位置，或修改其 z-index。
对于这些情况，这里有一些很好的视觉效果和代码示例: https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/