Z-색인을 사용하지 않고 div 겹치기

Question

해결할 수 없을 것 같은 문제에 부딪혔고 CSS 마법을 생각하고 있는데 이 문제에 대한 최선의 접근 방식은 무엇입니까?

이상적인 영역과 실제 진행률 표시줄이 있는 진행률 표시줄 구성요소가 있습니다. 진행률 표시줄이 이상적인 영역과 겹칠 때 z 값이 더 작은 것처럼 이상적인 영역을 숨기고 싶습니다. 이것을 시도한 결과 z-index가 정적으로 배치된 요소에서 작동하지 않는 것으로 나타났습니다. 이 동작을 어떻게 복제할 수 있습니까? 다음은 스타일링을 위해 tailwind를 사용하는 구성요소의 코드입니다.

'react'에서 React, { useEffect, useState }를 가져옵니다.

ProgressbarProps = {를 입력하세요.
  값: 숫자,
  maxValue: 숫자,
  백분율한도: 숫자,
  IdealZone: 숫자
};

function Progressbar({ value, maxValue, PercentCap, IdealZone }: ProgressbarProps) {
  const [displayedPercentage, setDisplayedPercentage] = useState(0);
  
  const IdealZoneStart = 100 - IdealZone/2;
  const IdealZoneEnd = 100 + IdealZone/2;

  useEffect(() => {
    const ActualPercentage = (값 / maxValue) * 100;
    setDisplayedPercentage(Math.min(percentageCap, ActualPercentage));
  }, [값, 최대값]);

  const 진행바색상 =
    표시 백분율 < IdealZoneStart
      ? 'bg-오렌지-500'
      : 표시비율 > IdealZoneEnd
      ? 'bg-레드-500'
      : 'bg-녹색-500';


  const 진행바스타일 = {
    너비: `${(displayedPercentage / PercentageCap) * 100}%`,
  };

  const IdealZoneStyle = {
    왼쪽: `${(idealZoneStart / PercentageCap) * 100}%`,
    너비: `${((idealZoneEnd - IdealZoneStart) / PercentageCap) * 100}%`,
  };

  반품 (
    <div className="relative">
      <div className={`h-4 반올림 ${progressBarColor}`} style={progressBarStyle}></div>
    <div className="absolute top-0 left-0 w-full h-4 bg-gray-200" style={idealZoneStyle}></div>
    </div>
  );
}

기본 진행률 내보내기;

Answer 1

이 내용이 귀하의 질문에 대한 답변인지 확실하지 않지만 다음을 시도해 보세요.

1. CSS 선택기 및 스타일:

   필요한 CSS 선택기와 스타일 규칙을 정의하는 것부터 시작하세요. 구성 요소 컨테이너에 클래스 이름이 .progressbar-container，你可以使用相邻兄弟选择器（+) 있다고 가정하여 이상적인 영역을 배치하고 진행률 표시줄이 겹치는 것을 방지하기 위해 숨기는 스타일을 적용합니다.

   으아악

2. 구성요소 구현:

   React 구성 요소 구현에서 .overlap클래스 개념을 사용하여 이상적인 영역의 동작을 제어하고 겹치는 조건을 기반으로 판단할 수 있습니다.

   으아악

중첩 조건에 따라 구성 요소 컨테이너에 .overlap 클래스를 조건부로 적용하면 진행률 표시줄이 겹칠 때 CSS의 인접한 형제 선택기가 원하는 영역을 숨깁니다. 조건이 충족되지 않으면 이상적인 영역이 예상대로 표시됩니다.