如何使 div 组件覆盖在任何其他组件（h1 或 p）之上

Question

下面的代码给出了这个结果：

有没有办法让下拉菜单在“你好”的顶部进行，这样它就不会显示 h1 和 p 标签？ 我尝试使用 z-index 但没有成功。 我尝试使整个组件的父元素是相对的，而下拉（子）是绝对的，但没有奏效。 我特别希望下拉菜单位于任何东西之上，并且不想让 h1 或 p 的 z-index 为负数。 是否有解决方案使下拉菜单位于每个元素的顶部？

再次，我真的很感激一个解决方案，它使DROPDOWN位于每个元素的顶部，而不是 h1 或 p 标签。 谢谢！

为了简单起见，我抽象了大部分方法，但这里是完整的工作版本： https : //codesandbox.io/s/quirky-shadow-zsr21?file=/src/styled-dropdown-selector.js

应用程序.js

const App = () => {
  return (
    <>
      <DropdownSelector
        lineColour="#000000"
        arrowColour="#000000"
        width="100%"
        onSelect={(value, options) => console.log(value, options)}
        options={[
          { label: '3777 Kingsway, Burnaby, BC V5H 3Z7', id: 1 },
          { label: '3888 Kingston, Ontario, ON V5H 3Z7', id: 2 },
          { label: '2999 Address, Vancouver, BC V5H 3Z7', id: 3 },
          { label: '4777 George, Richmond, BC V5H 3Z7', id: 4 },
          { label: '4222 Topaz, Coquitlam, BC V5H 3Z7', id: 5 },
          { label: '4333 Walnut, Langley, BC V5H 3Z7', id: 6 },
        ]}
      />
      <p>HELLO HELLO HELLO</p>
      <h1>HELLO HELLO HELLO</h1>
      <h1>HELLO HELLO HELLO</h1>
    </>
  )
};

下拉选择器.js

import React, { useState, useRef } from 'react';
import { SelectBox, SuggestionBox, SuggestionLabel, InvisibleButton } from './styled-dropdown-selector';

const DropdownSelector = ({ options, onSelect }) => {
  const initialValue = options ? options[0].label : '';
  const [val, setVal] = useState(initialValue);
  const [suggestions, setSuggestions] = useState([]);
  const [toggleEnabled, setToggleEnabled] = useState(false);

  const suggestionValue = () => {
    return suggestions.map(option => {
      return (
        <SuggestionLabel onMouseDown={() => setVal(option.label)}>
          {option.label}
        </SuggestionLabel>
      );
    });
  };

  return (
    <div>
      <SelectBox value={val} />
      <InvisibleButton >
        <img src={Arrow} alt="arrow" />
      </InvisibleButton>
      <div>
        {toggleEnabled && (
          <SuggestionBox>
            {suggestionValue()}
          </SuggestionBox>
        )}
      </div>
    </div>
  );
};

export default DropdownSelector;

styled-drpodown-selector.js

import styled from 'styled-components';

export const SelectBox = styled.input`
  outline: none;
  border: none;
  background: none;
  width: 100%;
  height: auto;
  margin: auto;
  display: inline;
  padding-bottom: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
`;

export const SuggestionBox = styled.div`
  position: absolute;
  width: ${props => props.width};
  margin-left: 0px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  padding-top: 5px;
  padding-bottom: 5px;
`;

export const SuggestionLabel = styled.button`
  outline: none;
  background: none;
  border: none;
  width: 100%;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
  text-align: left;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px 0px 5px 0px;
  transition: all 0.3s ease;
  &:hover {
    background: #e8e8e8;
  }
`;

export const InvisibleButton = styled.button`
  position: relative;
  top: 5px;
  float: right;
  margin-right: 3px;
  margin-top: -32px;
  cursor: pointer;
  background: none;
  outline: none;
  border: none;
  width: auto;
  height: auto;
  display: inline;
`

Answer 1

不确定这是否是您需要的低保真解决方案

export const SuggestionBox = styled.div`
  position: absolute;
  width: ${(props) => props.width};
  margin-left: 0px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: white;
  height: 100%;
`;

添加了background-color和height以使您到达那里。 https://codesandbox.io/s/great-mendeleev-2dl7n?file=/src/styled-dropdown-selector.js:353-609