javascript - 映射的下拉菜单不会显示在最前面

Question

我刚刚在 React 中为社交媒体制作了一个下拉菜单。当我打开该下拉菜单时，它会显示在所有其他组件的后面，并且我有一个按钮可以在 col 的最后创建另一个下拉菜单，当我在此关闭的下拉菜单上方打开另一个下拉菜单时，此下拉菜单不会留在后面。我为此尝试了 Z-index，但没有成功。
转动输入和下拉组件

  let [socials, setSocials] = useState(
    props.user.data.social_medias || [
      { social_id: "Instagram" },
      { social_id: "Twitter" },
      { social_id: "Linkedin" },
    ]
  );

 <div id="web" className="w-full z-20">
    <p className="font-bold mb-4">Sosyal Medya</p>
    {
     socials.map((social,i) => (

       <Socials key={i} social={social} value={social.profile_url} />
    ))
    }
</div>

和我的社交组件

  let [socialType, setSocialType] = useState(props.social.social_id || "");
  let counter = 0;
  console.log("key" + props.key);
  let [value, setValue] = useState(props.value);
  const [showMenu, setShowMenu] = useState(false);

  const socialMedias = [
    { name: "Web Sitesi", img: web },
    { name: "LinkedIn", img: linkedIn },
    { name: "Instagram", img: instagram },
    { name: "Facebook", img: facebook },
    { name: "Twitter", img: twitter },
    { name: "Youtube", img: youtube },
  ];

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div
      name="social-inputs"
      key={props.key}
      className="flex flex-row h-10 w-full mb-4 "
    >
      <input
        className="inline-block w-1/2 outline-none rounded px-3"
        style={{ boxShadow: "1px 1px 5px rgba(0, 49, 108, 0.2)" }}
        value={value}
        onChange={(e) => handleChange(e)}
      />
      <ul
        className="text-center ml-4 w-1/2 bg-white py-2 rounded inline-block "
        style={{ boxShadow: "1px 1px 5px rgba(0, 49, 108, 0.2)" }}
      >
        <li
          onClick={() => setShowMenu(!showMenu)}
          className={
            showMenu
              ? " px-4 flex flex-row justify-between mb-1"
              : "px-4 flex flex-row justify-between  "
          }
        >
          <p className="truncate">
            <img
              src={
                (socialMedias.find(function (element) {
                  return element.name === socialType;
                }) &&
                  socialMedias.find(function (element) {
                    return element.name === socialType;
                  }).img) ||
                web
              }
              alt={
                (socialMedias.find(function (element) {
                  return element.name === socialType;
                }) &&
                  socialMedias.find(function (element) {
                    return element.name === socialType;
                  }).name) ||
                "Web"
              }
              className="mr-3 inline-block"
            />

            {(socialMedias.find(function (element) {
              return element.name === socialType;
            }) &&
              socialMedias.find(function (element) {
                return element.name === socialType;
              }).name) ||
              "Web"}
          </p>
          <img
            src={arrow}
            alt="arrow"
            className="flex justify-end items-center "
          />
        </li>
        <Medias
          showMenu={showMenu}
          setShowMenu={setShowMenu}
          setSocialType={setSocialType}
        />
      </ul>
    </div>
  );

并且对于映射下拉组件中的所有值是媒体

const Medias = (props) => {
  let { showMenu } = props;
  console.log(showMenu);
  const socialMedias = [
    { name: "Web Sitesi", img: web },
    { name: "LinkedIn", img: linkedIn },
    { name: "Instagram", img: instagram },
    { name: "Facebook", img: facebook },
    { name: "Twitter", img: twitter },
    { name: "Youtube", img: youtube },
  ];
  const mappedMedias = socialMedias.map((media, i) => {
    return (
      <li
        key={i}
        onClick={() => {
          props.setSocialType(media.name);
          props.setShowMenu(false);
        }}
        style={{ boxShadow: "1px 1px 5px rgba(0, 49, 108, 0.2)" }}
        className={
          showMenu
            ? "inline-block w-full bg-white px-3 py-3 linksBlue z-50 flex items-center"
            : "hidden"
        }
      >
        <img src={media.img} alt={media.name} className="mr-3" />
        {media.name}
      </li>
    );
  });

  return (
    <div className={showMenu ? "block z-50" : "hidden"}>{mappedMedias}</div>
  );
};

最后我的问题图像是这样的。
无点击

当我只点击第一个下拉菜单时

当我同时单击第一个和第二个下拉菜单时

Answer 1

来自 W3Schoolsz-index仅适用于定位元素(position:absolute，position:relative，位置:固定或位置:粘性)和 flex 元素(显示: flex 元素的直接子元素)
添加 flex类(class)或 position: relative给您的<ul>元素添加添加 z-index给您的<li>大于 <Socials> 的元素零件。没有样式就很难确定真正的问题。