如何将Antd Dropdown组件定位到Col组件的右上角？

要实现Dropdown在Col右上角的定位，核心是利用相对定位+绝对定位的组合，同时不破坏Col内部原有元素的居中布局，具体修改如下：

1. 给Col容器添加相对定位 #

Col需要设置position: relative，作为绝对定位元素的参考容器：

<Col
  className="bg-white border d-flex justify-content-center align-items-center flex-column"
  style={{
    height: 174,
    position: 'relative', // 关键：让内部绝对定位元素以Col为基准
  }}
>
  <p>{title}</p>
  <p>{message}</p>
  {renderCardCtaButtons(listItem)}
</Col>

2. 给Dropdown包裹绝对定位容器 #

将Dropdown放在一个设置了绝对定位的div中，调整top和right值控制位置：

const renderCardCtaButtons = (record) => {
  return (
    <div style={{ position: 'absolute', top: 8, right: 8 }}>
      <Dropdown
        dropdownRender={() => (
          <div>
            <Button
              icon={<EditOutlined />}
              size="small"
            />
            <DeleteButton
              onDelete={() => deleteTemplate({ variables: { id: record.id } })}
            />
          </div>
        )}
        placement="bottomRight" // 保持下拉菜单从按钮右下角弹出
      >
        <Button size="small">
          <i className="fas fa-ellipsis-v"></i>
        </Button>
      </Dropdown>
    </div>
  )
}

为什么之前设置absolute无效？ #

你之前直接给Dropdown加position: absolute没生效，是因为没有给Col设置position: relative，此时绝对定位元素会以页面或最近的带定位的父元素为基准，而非Col容器。加上relative后，内部绝对定位元素就会以Col的边界为参考点，从而精准定位到右上角。

另外，绝对定位元素会脱离flex布局流，不会影响Col内部<p>标签的居中效果，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Mir Stephen