Question

我试图在任意容器内任意放置任意元素。我想将一个位置指定为百分比

0%表示＆＃34;左边缘与容器左边对齐，＆＃34;
100%表示＆＃34;右边缘与容器右侧对齐，＆＃34;
两者之间的任何值都是线性插值的，因此50%将＆＃34;中间与中间对齐＃34;

为实现此目的，容器具有position: relative;。该元素的position: absolute; left和top等于百分比 - 这些百分比将相对于容器的大小。然后，元素的内容向后移动position: relative;，left和top等于负百分比，因为这将相对于元素的大小。

演示：

＆＃13;

#container {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #cfc;
}
#item {
  position: absolute;
  left: 80%;
  top: 80%;
  background-color: #fcc;
}
#item>img {
  position: relative;
  display: block;
  left: -80%;
  top: -80%;
}

＆＃13;

<div id="container">
  <div id="item">
    <img src="//placehold.it/100x100" />
  </div>
</div>

＆＃13;

在演示中，绿色框是容器，红色框是元素＆＃34;真实＆＃34;位置，而占位符图像是实际内容。此处使用的坐标为(80%,80%)，使其显示在右下角。

如您所见，left组件工作正常。它正是应该的位置。然而，top并未进行＆＃34;转回＆＃34;事情。它根本不动。

当然有许多类似的问题，但我所看到的所有问题都来自＆＃34;相对于＆＃34;元素是relative，而不是absolute，这意味着容器的高度为零 - 足够公平。实际上，在演示中明确设置我的红色框上的height可以解决问题。但是，我是否提到这些组件是如何随意的？我无法明确设置元素的高度，我需要它根据内容而变化，内容可能会动态变化。

我有什么想法可以解决这个问题吗？

Answer 1

在这里，您可以将transform属性用于占位符，并为x和y坐标赋值相同，即-80％。希望这会帮助你。

＆＃13;

#container {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #cfc;
}
#item {
  position: absolute;
  left: 80%;
  top: 80%;
  background-color: #fcc;
}
#item>img {
  position: relative;
  display: block;
  transform: translate(-80%,-80%);
}

＆＃13;

<div id="container">
  <div id="item">
    <img src="//placehold.it/100x100" />
  </div>
</div>

＆＃13;

Answer 2

正如已经注意到的，这里的主要问题是，如果父级指定的高度不是这里的情况，那么具有百分比值的top将仅工作。因此，为了解决此问题，我们需要找到一种方法，使item指定的高度等于其内容高度，且不同于auto。

想法是考虑div中的另一个#item，并使其成为灵活容器。这将使新div被拉伸并具有指定的高度（是flex是魔术）因此top上的img值将正常工作。

#container {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #cfc;
  overflow:hidden;
}

#item {
  position: absolute;
  display:flex;
  animation: change-1 1s linear infinite alternate;
}

#item img {
  position: relative;
  display: block;
  animation: change-2 1s linear infinite alternate;
}


@keyframes change-1 {
  from {
    top:0%;
    left:0%;
  }
  to {
    top:100%;
    left:100%;
  }
}
@keyframes change-2 {
  from {
    top:0%;
    left:0%;
  }
  to {
    top:-100%;
    left:-100%;
  }
}

<div id="container">
  <div id="item">
    <div>
      <img src="//placehold.it/100x100" >
    </div>
  </div>
</div>

Answer 3

您应该指定父元素的高度：）

<强>更新您还可以尝试为img设置否定margin-top: -80%而不是top: 80%，并设置margin-bottom: 80%以保留父元素高度：

＆＃13;

#container {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #cfc;
}
#item {
  position: absolute;
  left: 80%;
  top: 80%;
  background-color: #fcc;
}
#item>img {
  position: relative;
  display: block;
  left: -80%;
  margin-top: -80%;
  margin-bottom: 80%;
}

＆＃13;

<div id="container">
  <div id="item">
    <img src="//placehold.it/100x100" />
  </div>
</div>

＆＃13;

唯一的技巧是百分比边距是相对于父元素宽度设置的，因此，显然，如果你没有方形图像，它将无法正常工作。

Answer 4

我已根据内容的像素大小设置margin-left和margin-top来解决问题，并为窗口大小调整和内容更改添加了事件处理程序。虽然这有效，但我不喜欢它。到目前为止，只有CSS的解决方案才能胜过这个。

CSS相对位置离开了，但顶部没有

4 个答案: