在容器的最右侧放置一个矩形答案

【问题标题】：Position a rectangle at the rightmost side of the container在容器的最右侧放置一个矩形
【发布时间】：2020-04-18 21:19:53
【问题描述】：

如何将矩形（称为right1）放置在屏幕的最右侧？我希望它剪辑，但不知何故溢出了。

我也尝试将overflow: hidden 给overlayContainer，但不知何故它一直在溢出。

<div className={styles.overlayContainer}>
  <Diamond styleName={styles.left1} />
  <Diamond styleName={styles.left2} />
  <Diamond styleName={styles.right1} />
</div>

right1 的样式是：

height: 36px
width: 36px
top: 200px
right: -24px

Diamond 组件只是一个应用了这两种样式的div

.diamond
  position: absolute
  transform: rotate(45deg)

编辑我想这样定位元素。

【问题讨论】：

你能提供一个工作代码 sn-p 重现这个问题吗？
@ZohirSalak 代码在 React 中。我应该如何显示sn-p？它也有很多组件。我怎样才能像这样在右侧定位元素？你有什么建议吗？

标签： css reactjs sass

【解决方案1】：

我会建议两个主要的事情。

确保body 元素具有max-width: 100vw;
确保body 元素具有overflow-x: hidden;

您可能仍想在 Y 轴上滚动（上/下）。

Codepen

<div class="diamond" />

html, body {
  max-width: 100vw;
}

body {
  background: black;
  padding: 0;
  margin: 0;
  position: relative;
  overflow-x: hidden;
}

.diamond {
  background: gold;
  width: 50px;
  height: 50px;
  transform: rotate(-45deg);
  transform-origin: top center;
  position: absolute;
  right: 0;
}

【讨论】：

成功了！谢谢！但是为什么 overflow-x: hidden 只在 body 上工作，而不是在父容器 - overlayContainer 上工作？
很好，所以overlayContainer 的宽度可能为100%，但它是控制溢出的父元素，但您可以在根元素处覆盖它，即body跨度>

【解决方案2】：

我认为问题是由于这个 css 引起的

右：-24px；

right:0;

如果这不能解决问题，请发布您的代码。

【讨论】：

哦，我想这样定位矩形。
使用权：0；提供相同的效果，除了没有溢出:)