CSS浮動小数点を別の位置に移動

Question

私はWooCommerceとExtra Product Optionsというプラグインを使用して、ワードプレスベースのウェブサイトを持っています。このプラグインでは、余分なオプション以外に、左下隅にフローティングボックスが表示され、選択したオプションが表示されます。

Link to product page

それは、商品の画像の下に固定することが左下隅から浮動ボックスを移動するために、CSSによっては可能ですか？

現在の位置は、小さな画面のユーザーが使用している場合を除き、完全に機能します。フローティングボックスは、他の製品イメージの一部と、buttomに表示される情報をカバーします。

これはあまりにも複雑な場合は、この問題に対して推奨される他の解決方法がありますか？すべてのアドバイスは非常にappriciatedです！前もって感謝します！ CSSの

Answer 1

これは、あなたが

.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 
} 

画像の下に置くことはできませんが、流れが止まり、左に貼り付けることはありません。