Question

我正在尝试为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设置了在线链接，在这两种情况下我都会遇到相同的行为。< / p>

注释4 ：如果您放入控制台$("#image").css('left');，它会检索到值'auto'。

我的问题

我添加到'auto'值的像素是否可能会添加到图像的实际位置而不是浏览器窗口的左侧？

提前致谢！

Answer 1

当使用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>

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

1 个答案: