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-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;
}

应该修复它。

绝对div被切断了

1 个答案: