Javascript 如何处理div容器css中的绝对位置？

我希望做到这一点：

我的结果是：

我的代码：

    <div
      style={{
        backgroundColor: 'yellow',
        padding: '25px',
        display: 'flex',
        justifyContent: 'center',
        height: '350px',
        margin: '45px',
        borderRadius: '25px',
      }}
    >
      <div
        style={{
          position: 'absolute',
          width: '10%',
          height: '50%',
          backgroundColor: 'gray',
          borderRadius: '10px',
          top: '240px',
          left: '550px',
          transform: 'rotate(-40deg)',
        }}
      />
      <div style={{ width: '70%', backgroundColor: 'blue' }}>blue</div>
      <div style={{ width: '30%', backgroundColor: 'orange' }}>
        <div>orange</div>
      </div>
    </div>

蓝色
橙色

---

我不希望灰色div位于黄色容器上方，我如何才能做到这一点，非常感谢：）

您可以将此添加到黄色容器：

溢出：“隐藏”，位置：'relative'

。但请注意，现在，灰色div的位置和尺寸将与黄色div相对，可能还需要调整。感谢blex，它起作用了：）