Bertindih div tanpa menggunakan indeks-z

Question

Saya telah menghadapi masalah yang nampaknya tidak dapat saya selesaikan dan saya sedang memikirkan beberapa keajaiban CSS, tetapi apakah pendekatan terbaik untuk masalah ini?

Saya mempunyai komponen bar kemajuan yang mempunyai kawasan yang ideal dan bar kemajuan sebenar. Apabila bar kemajuan bertindih dengan kawasan ideal, saya ingin menyembunyikan kawasan ideal seolah-olah ia mempunyai nilai z yang lebih kecil. Saya mencuba ini dan mendapati bahawa indeks-z tidak berfungsi pada elemen kedudukan statik, bagaimana saya boleh meniru tingkah laku ini? Berikut ialah kod untuk komponen, yang juga menggunakan tailwind untuk penggayaan.

import React, { useEffect, useState } daripada 'react';

taip ProgressbarProps = {
  nilai: nombor,
  maxValue: nombor,
  peratusan: nombor,
  idealZone: nombor
};

function Progressbar({ value, maxValue, percentageCap, idealZone }: ProgressbarProps) {
  const [displayedPercentage, setDisplayedPercentage] = useState(0);
  
  const idealZoneStart = 100 - idealZone/2;
  const idealZoneEnd = 100 + idealZone/2;

  useEffect(() => {
    const actualPercentage = (nilai / maxValue) * 100;
    setDisplayedPercentage(Math.min(percentageCap, actualPercentage));
  }, [nilai, maxValue]);

  const progressBarColor =
    dipaparkanPeratusan < idealZoneStart
      ? 'bg-oren-500'
      : dipaparkanPeratusan >
      ? 'bg-red-500'
      : 'bg-hijau-500';


  const progressBarStyle = {
    lebar: `${(displayedPercentage / percentageCap) * 100}%`,
  };

  const idealZoneStyle = {
    kiri: `${(idealZoneStart / percentageCap) * 100}%`,
    lebar: `${((idealZoneEnd - idealZoneStart) / percentageCap) * 100}%`,
  };

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

eksport Bar Kemajuan lalai;

Answer 1

Saya tidak pasti sama ada ini menjawab soalan anda, tetapi cuba ini:

1. Pemilih dan gaya CSS:

   Mulakan dengan menentukan pemilih CSS dan peraturan penggayaan yang diperlukan. Dengan mengandaikan bekas komponen anda mempunyai nama kelas .progressbar-container，你可以使用相邻兄弟选择器（+) untuk meletakkan kawasan yang ideal dan menggunakan gaya untuk menyembunyikannya bagi mengelakkan bar kemajuan daripada bertindih:

   /* 使用相邻兄弟选择器（+）定位理想区域 */
   .progressbar-container .h-4 + .bg-gray-200 {
     display: none; /* 隐藏理想区域元素 */
   }
   
   /* 你也可以定义一个类，在满足重叠条件时应用该类 */
   .overlap {
     /* 根据需要应用显示/隐藏理想区域的样式 */
   }
   

2. Pelaksanaan komponen:

   Dalam pelaksanaan komponen React anda, anda boleh menggunakan konsep .overlapkelas untuk mengawal tingkah laku kawasan ideal dan menilai berdasarkan keadaan bertindih:

   import React, { useEffect, useState } from 'react';
   
   type ProgressbarProps = {
     value: number,
     maxValue: number,
     percentageCap: number,
     idealZone: number
   };
   
   function Progressbar({ value, maxValue, percentageCap, idealZone }: ProgressbarProps) {
     const [displayedPercentage, setDisplayedPercentage] = useState(0);
   
     const idealZoneStart = 100 - idealZone / 2;
     const idealZoneEnd = 100 + idealZone / 2;
   
     useEffect(() => {
       const actualPercentage = (value / maxValue) * 100;
       setDisplayedPercentage(Math.min(percentageCap, actualPercentage));
     }, [value, maxValue]);
   
     const progressBarColor =
       displayedPercentage < idealZoneStart
         ? 'bg-orange-500'
         : displayedPercentage > idealZoneEnd
         ? 'bg-red-500'
         : 'bg-green-500';
   
     const progressBarStyle = {
       width: `${(displayedPercentage / percentageCap) * 100}%`,
     };
   
     return (
       <div className={`relative ${displayedPercentage >= idealZoneStart && displayedPercentage <= idealZoneEnd ? 'overlap' : ''}`}>
         <div className={`h-4 rounded ${progressBarColor}`} style={progressBarStyle}></div>
         <div className="absolute top-0 left-0 w-full h-4 bg-gray-200"></div>
       </div>
     );
   }
   
   export default Progressbar;

Dengan menggunakan kelas .overlap secara bersyarat pada bekas komponen berdasarkan keadaan bertindih, pemilih adik beradik bersebelahan dalam CSS akan menyembunyikan kawasan yang dikehendaki apabila bar kemajuan bertindih. Apabila syarat tidak dipenuhi, kawasan yang ideal akan dipaparkan seperti yang diharapkan.