cssの最大左または最小左位置を絶対オブジェクトに配置する方法は？

Question

私には次の要素があります：

position:absolute;
left: 70%;

たとえば、左から900ピクセル以上移動しないように要素を構成できますか？ max-widthのようなものですが、位置決め用ですか？

Answer 1

CSS3 Media Queriesを使用してそれを実現できます

そう：

#element {
  position:absolute;
  left: 70%;
}

画面が小さい場合やウィンドウのサイズを変更するときにオブジェクトをオーバーレイしたくない場合は、その後に追加できます。

@media all and (max-width: 980px) {
    #element{
        margin-left: 0px;
        left: 220px;
    }
}

画面の幅が980px未満の場合、＃elementオブジェクトは220pxに固定されます。

Answer 2

CSSでこれを行う唯一の方法は、絶対位置を削除し、それを右にフロートすることです。

左に浮いた空の「プッシャー」divを置きます。 70％の幅と900pxの最小幅を指定します。次に、要素を横にフロートします。

それ以外の場合は、Javascriptを使用する必要があります。

Answer 3

または、絶対位置の要素を、最小幅の比較的位置の高い要素でラップすることもできます。