html - 绝对div被切断

Question

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

你可以在这里看到结果: 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;
}

Answer 1

给色板 div 一个 position: relative，一个足够大的高度以适应控件和工具提示，并偏移 top: -45px 和 margin-底部:-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;
}

应该修复它。