Question

我这里有 Fiddle 。

*的注意
这使用同位素，但它在JSFiddle中无法正常运行。因此，当您使用小提琴时，它不会过滤，但会相应地突出显示相应的<div>。

然而，这不是问题......当您输入其中一个关键字（显示在小提琴上）时，它会缩小到几个文档。然后，当您将鼠标悬停在文档上时，它会显示“电子邮件”按钮和“PDF”按钮。

你也可以在搜索之前将鼠标悬停在文档上，看看我在说什么。

根据显示的div，图像（不同元素的背景）显示在不同的位置。

我不能让它们显示在每个橙色方块的相同位置。

以下是主<div> ...

的CSS

.iso-container li   {
  width: 140px;
  height: 140px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #f8981d;
  font-size: 0.01em;
  color: #f8981d;
  background-image: url(../images/doc-pdf.png);
  -webkit-border-top-right-radius: 1.2em;
  -webkit-border-bottom-left-radius: 1.2em;
  -webkit-border-top-left-radius: 1.2em;
  -webkit-border-bottom-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
      -moz-border-radius-topleft: 1.2em;
      -moz-border-radius-bottomright: 1.2em;
      -moz-border-radius-bottomleft: 1.2em;
          border-top-right-radius: 1.2em;
          border-top-left-radius: 1.2em;
          border-bottom-right-radius: 1.2em;
          border-bottom-left-radius: 1.2em;
            border-radius: 1.2em;
            behavior: url(pie/PIE.htc);
}

以下是悬停时出现的图片元素的CSS ...

.popover-email {
  display: none;
  width:  27px;
  height: 24px;
  background-image: url(../images/bxw_email.png);
  background-repeat: no-repeat;
  position: fixed;
  top: 65px;
  left: -100px;
}

.item:hover .popover-email { display: block; }

.popover-pdf {
  display: none;
  width:  25px;
  height: 27px;
  background-image: url(../images/pdf-button.png);
  background-repeat: no-repeat;
  position: fixed;
  top: 65px;
  left: -30px;
}

.item:hover .popover-pdf { display: block; }

.item:hover {
  z-index: 10;
}

Answer 1

position:absolute上的{p> .doc *是罪魁祸首。移除它，然后调整top和left定位，您将被设置。

绝对或相对div不会留在一个位置

1 个答案: