Question: It should be a combination of CSS and JavaScript. The steps to do should be:

1. Make it on top of all other elements (which property to specify?)
2. Catch the event when it is clicked (which event to listen to?)
3. Move the div as mouse moves.

But what are the details?

Answer: 
Yeah, you can use jQuery if you want a bloated library with far more functions than you need! Or if you want to be more of an elitist, use [Waltern Zorn's drag and drop library](http://www.walterzorn.com/dragdrop/dragdrop_e.htm), which is one tenth of the size.
1. To bring the div on top of other elements you have to assign it a high z-index. Additionally, you can set box-shadow to give a feedback to the user that the element is draggable.
2. You have to listen for a total of three events: ***mousedown***, ***mouseup***, and ***mousemove***. On ***mousedown*** you have to attach a listener on ***mousemove***, which tracks the mouse pointer movements and moves the div accordingly, and on ***mouseup*** you have to remove the listener on ***mousemove***.
3. Moving the div with the mouse is a bit tricky. If you ***translate*** the div to the pointer's position, the pointer will always point to the top left corner of the div, even when you click at the bottom right corner. For this, you have to calculate the coordinate difference between the div (top left corner) and the mouse pointer, in the ***mousedown*** event handler. Then, you have to subtract that difference from the mouse position before translating the div to that position, in the ***mousemove*** event handler.

[See the demo for a better idea.](https://jsfiddle.net/shai1436/em8aq6rj/1/)

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
      }
      #box {
        width: 100px;
        height: 100px;
        margin: auto;
        background-color: lightblue;
      }
      #box:active {
        border: 1px solid black;
        box-shadow: 2px 2px 5px 5px #bbb6b6;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script>
    var box = document.getElementById("box");
    var diff = {};
    var getBoxPos = function() {
      return {
        x: box.getBoundingClientRect().x,
        y: box.getBoundingClientRect().y
      };
    };
    var calcDiff = function(x, y) {
      var boxPos = getBoxPos();
      diff = {
        x: x - boxPos.x,
        y: y - boxPos.y
      };
    };
    var handleMouseMove = function(event) {
      var x = event.x;
      var y = event.y;
      x -= diff.x;
      y -= diff.y;

      console.log("X " + x + " Y " + y);
      box.style.position = "absolute";
      box.style.transform = "translate(" + x + "px ," + y + "px)";
    };

    box.addEventListener("mousedown", function(e) {
      calcDiff(e.x, e.y);
      box.addEventListener("mousemove", handleMouseMove, true);
    });

    box.addEventListener("mouseup", function(e) {
      console.log("onmouseup");
      box.removeEventListener("mousemove", handleMouseMove, true);
    });
  </script>
</html>

```