html - 有什么方法可以在 Twitter 上重现 CSS 折 Angular 效果吗？

Question

当您在 Twitter 上转推或收藏时，包含该推文的 div 的一 Angular 会出现一个带图标的彩色小三 Angular 形。我已经从 Twitter 复制了 CSS 和 sprite 表，并试图在我的网站上重新创建它，但它并没有完全按计划进行(使用完全相同的 CSS 根本没有出现三 Angular 形)。那么，如何在我网站上的 div 的 Angular 上添加三 Angular 形“狗耳”效果？

这是我从 Twitter 复制的代码:

.dogear {
  position:absolute;
  top:0;
  right:0;
  display:none;
  width:24px;
  height:24px;
}

.retweeted .dogear {
  background-position:0 -450px;
}

.favorited .dogear {
  background-position:-30px -450px;
}

.retweeted.favorited .dogear {
  background-position:-60px -450px;
}

.retweeted .dogear,.favorited .dogear,.retweeted.favorited .dogear{
  display:block;
}

i {
  background-image: url("../sprite.png") !important;
  display: inline-block;
  vertical-align: text-top;
  background-image: url("../sprite.png");
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

并使用以下方法插入到 HTML 中:

<i class="dogear"></i>

我更改了 sprite 表 URI，我打算更改类名称，并添加一些，因此它不完全相同。有没有可能让这个效果起作用？

谢谢:)

Answer 1

您需要向包含折 Angular 的元素添加一个更大的 z-index 属性，以便它出现在您希望它看起来重叠的元素的顶部。

z-index 用于控制绝对定位、相对定位或固定定位的元素的堆叠顺序。

您可以在 z-index 上阅读更多信息 on the Mozilla Developer Network .

此外，您使用的 dogear 类与我从您粘贴的代码中可以看出的内容隔离开来。如果您查看样式表中的类定义，它会被告知不要显示:display: none;