Html 绝对div被切断

我们使用工具提示在颜色选择器上显示颜色名称

您可以在这里看到结果：

不幸的是，左侧和右侧的工具提示被切断

来自颜色选择器的css

 .swatch {
  height: 80px;
  background-color: fff;
  position: relative;
  float: left;
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top: 55px;
  top: -55px;
  margin-bottom: -55px;
}

---

给出样本div a

位置：相对的

，足够大的高度以适合控制装置和工具头，偏移量

顶部：-45px

和

边距底部：-45px

。像这样：

.swatch {
    height: 80px;
    background-color: transparent;
    position: relative;
    width: 250px;
    overflow-x: scroll;
    vertical-align: bottom;
    padding-top: 45px;
    top: -45px;
    margin-bottom: -45px;
}

---

应该修复它。

我们实现了您的答案，效果非常好–如果您选择了靠近边缘的颜色，工具提示仍然会在左侧或右侧被剪切。但这可能无法修复。您可以扩展

宽度

，并在右侧添加一个负的

边距

（与上面类似），以包含右侧被截断的工具提示。感谢您的帮助。我把问题编辑成左右两边的一条线。