我正在尝试为具有 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"的值传递给了一个变量，但是我把300px这样你可以看到我得到的行为。
注意 3: 我在我的元素中使用 jquery-2.2.3.min.js 和 Google Chrome 但在这里我把Jquery 的在线链接，在这两种情况下我得到相同的行为。
注意 4:如果您在控制台中输入 $("#image").css('left'); 它会为您检索值 “自动”。
我的问题
我添加到“自动”值的像素是否可能会添加到图像的实际位置，而不是浏览器窗口的左侧？
提前致谢!
最佳答案
当使用 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>关于jquery - 是否可以将像素添加到 'auto' 值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36632456/