Можно ли добавить пиксели к значению 'auto'?

Я пытаюсь анимировать изображение, которое имеет position: absolute;, добавив несколько пикселей в значение по умолчанию. Поскольку это значение по умолчанию, left является auto.Можно ли добавить пиксели к значению 'auto'?

Проблема в том, что пиксели, которые я пытаюсь добавить, не добавляются в фактическое положение изображения, кажется, что они добавлены слева от окна браузера, независимо от положения образ.

Это мой HTML код:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <link rel="stylesheet" href="styles.css"> 

     <script type="text/javascript"> 

      function moveImage(){ 
       $("#image").animate({ 
        left: "+=300px" 
       }, 1000); 
      } 
     </script> 
    </head> 
    <body> 
     <button type="button" onclick="moveImage()">Move image</button> 
     <div id="container"> 
      <div id="left" class="block">Left</div> 
      <div id="center" class="block"> 
       <img id="image" src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="stackoverflow"> 
      </div> 
      <div id="right" class="block">Right</div> 
     </div> 
    </body> 
</html>

Это мой CSS код:

html, body{ 
    width: 100%; 
    height: 100%; 
} 

#container{ 
    display: flex; 
    height: 100%; 
} 

.block{ 
    flex: 1; 
} 

#left{ 
    background-color: red; 
} 

#center{ 
    background-color: yellow; 
} 

#right{ 
    background-color: orange; 
} 

#image{ 
    position: absolute; 
    height: 100px; 
    width: 300px; 
}

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

Примечание 2: Как я упростил код, в моем проекте я передать значение left: "+=300px" с переменной, но я ставлю 300px, так что вы можете увидеть, что поведение я получаю.

Примечание 3: Я использую jquery-2.2.3.min.js и Google Chrome на моем проекте, но здесь я поставил онлайн ссылку на Jquery и в обоих случаях я получаю такое же поведение.

Примечание 4: Если вы поместите в консоли $("#image").css('left'); он извлекает для вас значение 'auto'.

Мой вопрос

Возможно ли, что пиксели, которые я добавляю к этому значению «Авто» будет добавлена к фактическому положению изображения, а не на левой части окна браузера?

Заранее благодарен!

источник

2016-04-14 Francisco Romero

При использовании position: absolute это его первый родитель с нестационарным позиционированием, который будет ссылкой на левое/верхнее положение, и поскольку никто не имеет этого, это будет тело.

Добавить position: relative; в ваше правило #center, и оно будет работать должным образом.

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#container{ 
 
    display: flex; 
 
    height: 100%; 
 
} 
 

 
.block{ 
 
    flex: 1; 
 
} 
 

 
#left{ 
 
    background-color: red; 
 
} 
 

 
#center{ 
 
    position: relative; 
 
    background-color: yellow; 
 
} 
 

 
#right{ 
 
    background-color: orange; 
 
} 
 

 
#image{ 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 

 
    function moveImage(){ 
 
    $("#image").animate({ 
 
     left: "+=300px" 
 
    }, 1000); 
 
    } 
 
</script> 
 

 
<button type="button" onclick="moveImage()">Move image</button> 
 
<div id="container"> 
 
    <div id="left" class="block">Left</div> 
 
    <div id="center" class="block"> 
 
    <img id="image" src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="stackoverflow"> 
 
    </div> 
 
    <div id="right" class="block">Right</div> 
 
</div>

источник

2016-04-14 19:46:24 LGSon

Wow! Спасибо! Я, хотя его родитель будет гибким объектом, но я забыл, что когда вы устанавливаете 'position: absolute' в элемент, он ищет своего ближайшего родителя, который имеет' position: absolute' или 'position: relative'. Еще раз спасибо! –

Если нет позиционированного предка, абсолютно позиционированный элемент привязан к * начальному содержащему блоку *, а не к элементу 'body' (если, конечно,' body' не является позиционированным элементом). Для всех практических целей исходный содержащий блок является корневым элементом/видовым окном. https://www.w3.org/TR/CSS2/visuren.html#comp-abspos –

@Michael_B В этом случае, и без позиционированного предка, это был бы элемент html, являющийся корневым элементом, правильно? – LGSon

Можно ли добавить пиксели к значению 'auto'?

ответ

Смежные вопросы