为什么retour div不在右下角？

Question

div retour曾经在屏幕的右下角但是当我添加另一个div时它就消失了。我尝试了我能想到的一切，但没有任何效果。我认为，绝对位置无法移动。

  .retour {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  position: relative;
  bottom: 0;
  right: 0;
  margin: 20px;
}

.retour a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
  padding: 14px;
}

<div class="retour">
  <a href="../index.html">Retour</a>
</div>

<div class="soundcloud">
  <iframe width= 50% src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/335992324&amp;
          color=#9cb4b6;
          auto_play=true;
          hide_related=false&amp;
          show_comments=true&amp;
          show_user=true&amp;
          show_reposts=false">
</div>

1 个答案:

答案 0 :(得分：0)

只有当此元素位于绝对位置（right）或已修复时，您才可以通过left，top，bottom和position: absolute属性定位元素位置（position: fixed）。我想你想要position: absolute，所以这里有一个例子（因为你指定了margin: 20px，所以不在角落里）：

.retour {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 20px;
}

.retour a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
  padding: 14px;
}

<div class="retour">
  <a href="">test</a>
</div>

更新

滚动与position: absolute的区别：

body {
  height: 1000px;
}

.retour {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 20px;
}

.retour a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
  padding: 14px;
}

<div class="retour">
  <a href="">test</a>
</div>

position: fixed：

body {
  height: 1000px;
}

.retour {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 20px;
}

.retour a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
  padding: 14px;
}

<div class="retour">
  <a href="">test</a>
</div>

Answer 1

只有当此元素位于绝对位置（right）或已修复时，您才可以通过left，top，bottom和position: absolute属性定位元素位置（position: fixed）。我想你想要position: absolute，所以这里有一个例子（因为你指定了margin: 20px，所以不在角落里）：

.retour {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 20px;
}

.retour a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
  padding: 14px;
}

<div class="retour">
  <a href="">test</a>
</div>

更新

滚动与position: absolute的区别：

body {
  height: 1000px;
}

.retour {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 20px;
}

.retour a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
  padding: 14px;
}

<div class="retour">
  <a href="">test</a>
</div>

position: fixed：

body {
  height: 1000px;
}

.retour {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 20px;
}

.retour a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
  padding: 14px;
}

<div class="retour">
  <a href="">test</a>
</div>