絶対配置された要素の左/右を「キャンセル」する方法は？

Question

私は絶対に配置されたdivを持っており、leftポジションを与えました。

デスクトップの場合、leftの位置は100pxにする必要があります。

しかし、タブレットでは、右にずっと押しています。

これを達成するには、right: 0を試しましたが、left: 100pxがすでにCSSで定義されているため、right: 0は意図した通りに完全にプッシュしません。

その後、タブレットでleft: 0をやってみましたが、その効果は消えてしまいましたが、うまくいきませんでした。

leftの位置をキャンセルする方法はありますか？ left: noneような何か（私はそれが動作しません知っているが、それは私がこれを説明することができています唯一の方法です。）

デスクトップCSS：

.mydiv { 
    positon: absolute; 
    left: 100px; 
} 

タブレットCSS：

@media (max-width:768px){ 
    .mydiv { 
     left: 0; 
     right: 0; 
    } 
} 

私が行うことができますright: 400pxのようなものを私が望む位置に持っていくことができますが、私はright: 0を使うことができる方法があれば好奇心が強いので、それが完全に右に押されていることは確かです。

ありがとうございます！ leftプロパティの使用をリセットするには

Answer 1

left: auto; 

あなたはCSSプロパティの初期値を取得するためにCSSリファレンスを使用することができます。たとえば、leftプロパティの参照は次のとおりです。https://developer.mozilla.org/en/docs/Web/CSS/left

Answer 2

絶対配置された要素を反対側にずらしたい場合は、100%を使用します。

つまり、leftをリセットするか、rightを使用する必要はありません。

@media (max-width:768px){ 
    .mydiv { 
     left: 100%; 
    } 
} 

をと完璧な位置決めのために、あなたはこれが必要な場合があります：ちょうどleftを上書き

@media (max-width:768px){ 
    .mydiv { 
     left: 100%; 
     transform: translateX(-100%); 
    } 
} 

left: 100%ので、要素の左端に基づいてコンテナの反対側に要素100％に合わせます、これにより、要素がコンテナの右端を過ぎて消えてしまうことがあります。

transformルールは、要素がそれ自身の幅の100％を正確に戻すように指示します。詳細はこちらElement will not stay centered, especially when re-sizing screen