设置absolute定位的两个按钮重叠，添加margin-left仍粘连如何解决？

问题原因 #

position: absolute会让元素脱离正常文档流，定位基准变为最近的非static定位的父级元素。你给两个按钮设置了完全相同的绝对定位规则bottom: 0，两者默认的起始定位坐标都是父元素左下角的同一点，你给所有.Entery-Buttons加的margin-left: 20px是让两个按钮同时从「父元素左边界+20px」的位置开始渲染，自然还是会重叠，脱离文档流的同级元素不会因为margin产生相互之间的间距。

解决方法 #

推荐优先使用「父容器统一控制定位+内部正常流排列」的方案，灵活性最高：

方案1：父容器包裹+flex布局（最推荐） #

修改HTML，给两个按钮加一层父容器：

<div class="button-wrapper">
  <button class="Entery-Buttons">c#</button>
  <button class="Entery-Buttons">Html</button>
</div>

修改CSS，把绝对定位挪到父容器上，用flex控制按钮间距：

/* 父容器统一控制定位 */
.button-wrapper {
  position: absolute;
  bottom: 0;
  left: 20px; /* 替代原来的按钮margin-left，控制整个按钮组和左侧的距离 */
  display: flex;
  gap: 20px; /* 直接控制两个按钮之间的间距，无需单独设置margin */
}
.Entery-Buttons {
  background-color: blue;
  color: white;
  /* 去掉原来的position:absolute、bottom、margin-left属性 */
}

方案2：单独给第二个按钮设置left偏移（仅适合固定宽度按钮场景） #

如果不想改HTML结构，可以单独给第二个按钮设置left偏移值，强制调整位置：

.Entery-Buttons {
  background-color:blue;
  color:white;
  position:absolute;
  bottom: 0;
  margin-left:20px;
}
/* 单独给第二个按钮加左偏移，偏移值需要大于第一个按钮的宽度+期望间距 */
.Entery-Buttons:nth-child(2) {
  left: 80px; 
}

这个方案灵活性差，按钮内容宽度变化时需要重新调整left值，不建议长期使用。

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