如何用Tailwind CSS将按钮定位在卡片父容器边缘且不被遮挡

我尝试给父卡片设置relative定位，按钮设为absolute并调整bottom值，但按钮被卡片遮挡了一半。

父容器的Tailwind类：

className="first-card relative"

按钮的Tailwind类：

className="-bottom-6 left-[50%] translate-x-[-50%] absolute"

完整代码片段：

import { Card, Button } from "@mui/material";

const MyComponent = () => {
  const openAddDialog = () => {
    // Handle button click
  };

  return (
    <Card
      className="first-card relative"
      sx={{
        borderRadius: "20px",
        paddingTop: "10px",
        height: "20%",
        marginBottom: "2%",
        position: "relative", // Ensure the card has relative positioning
      }}
      elevation={0}
    >
      {/* Other components */}
      <Button
        variant="contained"
        sx={{
          borderRadius: "50px", // Pill shape
          backgroundColor: "#fff",
          color: "#0AE9D3",
          padding: "4px 16px", // Small size
          fontSize: "12px", // Small text
          marginBottom: "10px",
          fontFamily: "Poppins",
          fontWeight: 500,
          "&:hover": {
            backgroundColor: "#fff",
          },
          width: "20%",
          position: "absolute", // Position absolutely
          bottom: "-9px", // Adjust bottom position
          left: "50%",
          transform: "translateX(-50%)", // Center horizontally
        }}
        onClick={openAddDialog}
      >
        View Details
      </Button>
    </Card>
  );
};

export default MyComponent;

按钮被遮挡的核心原因是卡片默认overflow: hidden，加上圆角会直接切掉超出部分；另外同时混用Tailwind和MUI的sx样式，容易导致定位规则冲突。

解决步骤 #

1. 取消卡片溢出隐藏：给卡片添加Tailwind类overflow-visible，让按钮可以完整显示在卡片外部
2. 统一定位样式：选择Tailwind或MUIsx其中一种方式管理定位，避免规则冲突，推荐用Tailwind更直观
3. 微调按钮位置：根据按钮实际高度调整bottom负值，让按钮刚好卡在卡片底部边缘

修改后的代码示例 #

import { Card, Button } from "@mui/material";

const MyComponent = () => {
  const openAddDialog = () => {
    // Handle button click
  };

  return (
    <Card
      className="first-card relative overflow-visible" // 添加overflow-visible取消溢出隐藏
      sx={{
        borderRadius: "20px",
        paddingTop: "10px",
        height: "20%",
        marginBottom: "2%",
        // 移除重复的position: relative，Tailwind类已生效
      }}
      elevation={0}
    >
      {/* Other components */}
      <Button
        variant="contained"
        className="absolute left-1/2 -translate-x-1/2 -bottom-6" // Tailwind统一处理定位
        sx={{
          borderRadius: "50px",
          backgroundColor: "#fff",
          color: "#0AE9D3",
          padding: "4px 16px",
          fontSize: "12px",
          fontFamily: "Poppins",
          fontWeight: 500,
          "&:hover": {
            backgroundColor: "#fff",
          },
          width: "20%",
          // 移除sx里的定位规则，避免和Tailwind冲突
        }}
        onClick={openAddDialog}
      >
        View Details
      </Button>
    </Card>
  );
};

export default MyComponent;

额外说明 #

• 如果必须保留卡片的overflow: hidden（比如内部内容不能溢出），这种方法不适用，只能调整卡片底部padding，让按钮放在卡片内部的底部边缘
• 可以根据按钮实际高度调整-bottom-6的数值，比如-bottom-4会让按钮露出更多，-bottom-7会让按钮更贴近卡片底部

内容的提问来源于stack exchange，提问作者vasista sharma