CODEWITHSUNDEEP
jquerycss
Francisco Romero
Francisco Romero

Reputation: 13199

Is it possible to add pixels to an 'auto' value?

I am trying to animate an image that has position: absolute; adding some pixels to its default value. As it is default, the left property is auto.

The problem it is that the pixels that I am trying to add, are not added to the actual position of the image, it seems that they are been added to the left of the browser window, regardless of the position of the image.

This is my HTML code:

<!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>

This is my CSS code:

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;
}

Note: I simplified my code as much I could because it was very extended but it is the same behaviour that I am having on my project.

Note 2: As I simplified the code, in my project I pass the value of left: "+=300px" with a variable, but I put 300px so you can see the behaviour that I am getting.

Note 3: I am using jquery-2.2.3.min.js and Google Chrome on my project but here I put the online link for Jquery and in both cases I get the same behaviour.

Note 4: If you put in the console $("#image").css('left'); it retrieves to you the value 'auto'.

My question

Is it possible that the pixels that I am adding to that 'auto' value would be added to the actual position of the image and not on the left of the browser window?

Thanks in advance!

Upvotes: 0

Views: 391

Answers (1)

Asons
Asons

Reputation: 87251

When using position: absolute it is its first parent with a non static positioning that will be the reference to the left/top position and since no one has that, it will be the body.

Add position: relative; to your #center rule and it will work as expected.

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>

Upvotes: 1

Related Questions