javascript - CSS 将 float 元素移动到另一个位置

Question

我有一个基于 wordpress 的网站，使用 WooCommerce 和一个名为 Extra Product Options 的插件。有了这个插件，除了有额外的选项，我在左下角得到一个 float 框，显示选定的选项。

Link to product page

是否可以通过 CSS 将 float 框从左下角移动到固定在产品图片下方？

当前位置完美无缺，除非屏幕较小的人正在使用它，因为此时 float 框会覆盖一些其他产品图像和显示在底部的信息。

如果这过于复杂，是否还有其他推荐的解决方案来解决这个问题？所有建议都非常适用!提前致谢!

Answer 1

在css中找到.tm-floating-box并将位置从fixed设置为relative

这就是你拥有的

.tm-floating-box {
    width: auto;
    height: auto;
    padding: 1em;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background: url("../images/p5.png") repeat scroll 0 0 transparent;
    z-index: 9999;
    max-height: 100%;
    overflow: hidden
}

这是你想要改变的

.tm-floating-box {
    width: auto;
    height: auto;
    padding: 1em;
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background: url("../images/p5.png") repeat scroll 0 0 transparent;
    z-index: 9999;
    max-height: 100%;
    overflow: hidden
}

它可能不会把它放在图像下面，但它会阻止它四处流动并将它贴在左边。