是否可以将像素添加到“自动”值？

我正在尝试使图像具有position: absolute;将某些像素添加到其默认值。因为它是默认的，所以left属性是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"值与变量，但我把300像素，所以你可以看到，我收到的行为。

注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

哇！谢谢！虽然它的父类是flex对象，但我忘记了当你将'position：absolute'设置为一个元素时，它会搜索具有'position：absolute'或'position：relative'的近亲。再次感谢你！ –

如果没有定位的祖先，绝对定位的元素绑定到* initial包含块*，而不是'body'元素（当然，除非'body'是定位元素）。出于所有实际的目的，初始包含块是根元素/视口。 https://www.w3.org/TR/CSS2/visuren.html#comp-abspos –

@Michael_B在这种情况下，没有定位的祖先，它将是HTML元素是根元素，是正确的？ – LGSon

是否可以将像素添加到“自动”值？

回答

相关问题