html - 绝对div被切断

我们使用工具提示，在颜色选择器上显示颜色名称。
你可以在这里看到结果：www.printnil.com
不幸的是，工具提示在左侧和右侧被切断。
颜色选择器中的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 aposition: relative，一个足够大的高度来适应控制和刀尖，并且偏移top: -45px和margin-bottom: -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;
}

应该会修好的。

关于html - 绝对div被切断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27558038/