jQuery dialog jumps to bottom of page

Question

I am using jQuery in order to create a custom popUp similar to a tutorial/tip for the end user (who can be on Chrome OR any other browser). However as you can see in the below image, the divs that contain my code have a large top which pushes my code down. While using Chrome's developer tools, I notice it would take -591px to have the popup where I want so I used the below code:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" />
  <script>
    function myFunction() {

        $(function () {
            $("#something").dialog();
        });

        $("#something").dialog({
            top:-591
        });
    }
    </script>

    <div id="something"  style="resize:both; display:none; background-color:yellow; height: 200px; width:200px;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed.</p>
</div>

I tried several answers from this link but they didn't work. Also, I noticed when I comment out the first script line (jquery-2.1.11.min.js) it stops working, so it might have to do with that jQuery version?

Here is the screenshot from Chrome's Dev Tools:

Answer 1

The problem is that you have added js again instead of adding CSS

Change it to jquery-ui.css

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

DEMO