CODEWITHSUNDEEP
htmljqueryposition
adibak
adibak

Reputation: 141

How to set position of a div using jquery?

How do I set the position of a div with jQuery? I tried using this:

<!DOCTYPE html>
<html>
    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
        </script>
    </head>
    <body>
        <img src = "https://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Us_flag_large_38_stars.png/1200px-Us_flag_large_38_stars.png" id = "flag" width = "200px" height = "140px">
        <div id = "pole"></div>
    
        <script>
            $("#pole").width(10);
            $("#pole").height(400);
            $("#pole").css("background-color", "gray");
            console.log($("#pole").position());
            $("#pole").css({'left': 200});
        
        </script>
    </body>
</html>

But the 'pole' div just stayed where it was....can someone help? Thanks.

Upvotes: 0

Views: 104

Answers (2)

Binh Vo
Binh Vo

Reputation: 104

Set #pole' position as absolute. 

$("#pole").width(10);
$("#pole").height(400);
$("#pole").css("background-color", "gray");
$("#pole").css("position", "absolute");
$("#pole").css({'left': 200});


$("#pole").on( "click", function() {
  $("#pole").css({'left': 10});
});
<!DOCTYPE html>
<html>
    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
        </script>
    </head>
    <body>
        <img src = "https://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Us_flag_large_38_stars.png/1200px-Us_flag_large_38_stars.png" id = "flag" width = "200px" height = "140px">
        <div id = "pole"></div>
    
        
    </body>
</html>

Upvotes: 0

Mohammad Javad Ghasemy
Mohammad Javad Ghasemy

Reputation: 132

why not using $("#pole").css("position", "absolute"); ?

Upvotes: 2

Related Questions