Question

我知道这个问题已被问过几次，但没有一个答案非常清楚，如果有人可以解决代码并解释为什么会出现这个问题，我会写一些基本代码，我将非常感激。问题是.hhe动画在页脚上的位置设置为绝对时被取消。

https://codepen.io/HamHat/pen/zpemYz

以下是未来使用的代码，似乎是一个常见的问题。

HTML：

<footer>
  <ul>
      <li><a href="#about">About Us</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#privacy">Privacy</a></li>
  </ul>
      <div class="bear">
      <a href="google.com"><img src="https://placebear.com/g/80/80"></a>
    </div>
</footer>

CSS：

footer{
  display: flex;
  position: absolute;
  justify-content: center;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: red;
}

ul{
  display: flex;
  list-style-type: none;
  border-radius: 5px;
}

li a{
  color: black;
  display: inline-block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover{
  background-color: white;
}

.bear {
  width : 100%;
  position: absolute;
  text-align: right;
}

Answer 1

熊的图像宽度是100％，这就是它无法正常工作的原因

footer{
  display: flex;
  position: absolute;
  justify-content: center;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: red;
}

ul{
  display: flex;
  list-style-type: none;
  border-radius: 5px;
}

li a{
  color: black;
  display: inline-block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

a:hover{
  background-color: white;
}

.bear {
  width : 10%;
  position: absolute;
  right:0;
}

<footer>
  <ul>
      <li><a href="#about">About Us</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#privacy">Privacy</a></li>
  </ul>
      <div class="bear">
      <a href="google.com"><img src="https://placebear.com/g/80/80"></a>
    </div>
</footer>

CSS悬停＆amp;职位：绝对不行

1 个答案: