如何在Course-Block容器内自由定位Start按钮div元素

我帮你排查了这个定位问题，你遇到的按钮消失情况，核心原因是绝对定位的元素需要有一个已定位的父容器作为参照基准。当你给.Start-Button设置position: absolute时，如果它的父元素.Course-Block没有设置非static的定位属性，按钮就会相对于页面根元素（比如<body>）定位，很容易超出父容器的可视范围导致“消失”。

下面是具体的修复步骤：

1. 给父容器添加相对定位
   首先给.Course-Block设置position: relative，让它成为内部绝对定位元素的参照容器：

   .Course-Block {
     position: relative;
     /* 保留你原有的width、height、background等样式 */
   }
   

2. 调整按钮的绝对定位参数
   现在可以安全地给.Start-Button设置偏移属性，把它定位到你想要的位置（比如示例图里的右下角）：

   .Start-Button {
     position: absolute;
     bottom: 15px; /* 距离父容器底部的间距 */
     right: 15px; /* 距离父容器右侧的间距 */
     /* 保留你原有的width、height、background-color、border-radius等样式 */
   }
   

3. 验证效果
   这样修改后，按钮会牢牢依附在.Course-Block的右下角，不会再脱离父容器消失，而且会随着父容器的位置变化同步移动，完全符合你给出的示例图效果。

小提示 #

• 绝对定位的元素会脱离文档流，不用担心它会干扰父容器内其他元素的布局
• 如果需要把按钮放在其他位置，只需要调整bottom/right等值即可，比如要放在左下角就改成left: 15px

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