我想做的是让子元素直接从父元素的底部开始。我知道这个问题已经被问过很多次了，但是我一直在阅读这些答案，并不是每个解决方案都能解决我的问题。它们基本上都说要把父元素放到“position：relative”和子元素到“position：“绝对”，这是我确信是真的，我只是仍然错过了一些东西。
首先，看看我的React代码（非常简单的代码，仅用于此学习目的）：

import './App.css';

function App() {
  return (
    <div className="App">
      <div className="d1">
        <ul className="ul1">
          <li className="li1">Home</li>
          <li className="li1">About</li>
          <li className="li1">Contact</li>
        </ul>
      </div>
    </div>
  );
}

export default App;

看看我的CSS代码：

.App {
  border: 1px solid red;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.d1 {
  position: relative;
  border: 1px solid blue;
  margin: 10px;
  min-height: 80px;
  min-width: 100px;

}

.ul1 {
  border: 1px solid green;
  position: absolute;
  height: 80px;
  top: 100%;

}

现在看下面的snip。我想要的是绿色的列表从蓝色突出显示的div的底部开始。最上面的图像是我能得到的。底部的图像，如果我想实现注意，我硬编码的位置上的底部的图像，所以这就是我如何能够得到它只是为了这一剪。在实践中，我希望它在该位置动态显示。