Как «отменить» влево/вправо для абсолютно позиционированного элемента?

Question

У меня есть div, который позиционируется абсолютно, и я дал ему left.

Для рабочего стола необходимо иметь left положение 100px.

Но для планшета я хочу проталкивать его полностью вправо.

Для этого я пробовал делать right: 0, но так как left: 100px уже определен в CSS, right: 0 не проталкивает его полностью вправо, как предполагалось.

Затем я попытался сделать left: 0 в планшете, чтобы отменить эффект, который у него есть, но это тоже не сработало.

Есть ли способ отменить позицию left? Что-то вроде left: none (я знаю, что не работает, но это единственный способ, которым я могу это объяснить.)

Desktop CSS:

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

Tablet CSS:

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

я мог бы сделать что-то вроде right: 400px, чтобы добраться до той позиции, которую я хочу, но мне просто интересно, есть ли способ, которым я могу использовать right: 0, поэтому я точно знаю, что он полностью сдвинут вправо.

Спасибо!

Answer 1

Чтобы сбросить использование left свойства

left: auto; 

Вы можете использовать ссылку CSS, чтобы получить начальные значения свойств CSS. Например, здесь приведена ссылка для объекта left: https://developer.mozilla.org/en/docs/Web/CSS/left

Answer 2

Если вы хотите перенести абсолютно позиционированный элемент на другую сторону, используйте 100%.

Другими словами, вам не нужно устанавливать left или использовать right. Просто переопределить left:

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

А для идеального позиционирования, вам может понадобиться следующее:

@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