使兄弟姐妹元素固定，而不考虑顶部元素的位置

Making Sibling elements fixed irrespective of top ones position

本文关键字：元素 不考虑 顶部 位置 兄弟姐妹      更新时间：2023-09-26

这是我遇到问题的代码。

HTML

<a href="">abc</a>
<p>text</p>

CSS

a {
  height: 100px;
  width: 100px;
  display: inline-block;
  background: red;
}
a:hover {
  height: 90px;
}

我有两个元素，我想使第二个元素的位置固定，而不考虑第一个元素的高度。在上面的小提琴中，高度在"悬停"上变化，然后我看到第二个元素在抖动。

在我的情况下，使用固定和绝对位置将不起作用。

有什么想法吗？

您可以将padding-top用于段落。该值是正常状态和悬停状态下的高度差。我已经使用+同级选择器来选择下一个元素。

a {
  height: 100px;
  width: 100px;
  display: inline-block;
  background: red;
}
a:hover {
  height: 90px;
}
a:hover + p {
  padding-top: 10px; /* Value(Difference between heights) */
}
<a href="">abc</a>
<p>text</p>

相关文章：