将元素定位到左下角而不覆盖任何东西答案

【问题标题】：Positioning element to the left bottom corner without covering anything将元素定位到左下角而不覆盖任何东西
【发布时间】：2017-03-01 22:14:01
【问题描述】：

我在父块中有两个元素，我想要一个在左上角，第二个在右下角，我还需要它们不要相互重叠。

我试过了：

有办法吗？

【问题讨论】：

你能解释一下“不相互重叠”是什么意思吗？ - 也许你也可以用捷克语，可能会更容易解释（můžeš i česky, bude asi snažší na vysvětlení）
Aby se nepřekrývaly, mám cenu a přidat do košíku, což se při absolutním pozicování při nedostatku místa zobrazí přes cenu.
你能发个链接吗，我一会儿看看。 (Můžeš poslat link, za chvilku bych se na to podíval)
例如 here 但现在的 html 结构有点不同。
这应该有帮助（tohle by mělo pomoct） - 没有简单的方法可以在不覆盖的情况下对右下位置进行相对编码。 @media(max-width:1000px){ input#product_addtocart { position: relative; float:right; } }

【解决方案1】：

当重叠即将发生时，您将不得不添加条件样式并将右侧绝对元素的定位更改为相对

@media(max-width:1000px){ input#product_addtocart { position: relative; float:right; } }

当视口宽度低于 1000 像素时（元素即将相互重叠） - 只需将定位更改为相对，即可避免这种情况。

【讨论】：

很遗憾css不能完成这么普通的任务。该解决方案适用于普通人，但它适用于两个元素的固定宽度。如果我在价格标签中输入了太多数字，添加到购物车按钮并不在意，而是显示在所述价格之上。也许我可以用 javascript 完成这个。
好吧，你可以浮动，或者让这两个元素充当“内联块”，但是你可能不得不再次使用条件样式来解决垂直对齐问题......但是嘿，不要'不要为此感到难过 - 条件样式是广泛使用的非常普遍的做法。我们可以在未来优雅地解决此类案例时获得新的 Web 标准，但这还不确定。无论如何 - 快乐的编码和 Hodněštěstí ;)