Let's review the code to understand the way ol.Overlay works.

First, we defined a new ol.Overlay with the following:

var popup = new ol.Overlay({
  element: document.getElementById('popup')
});

The element property in the object literal option of the constructor has to reference an HTML element.

Here, we reference the HTML text <b>OpenLayers 3 Code Sprint</b> <i>Humanities A3</i> located in a <div> tag with an id value of popup.

Next, we performed the usual steps, such as creating layers, creating map, adding the layers, and setting the view, as follows:

var osmLayer = new ol.layer.Tile({
...
...
  map.setView(view);

Just after this block, we added the ol.Overlay object to the map in order to declare that we are using an overlay:

map.addOverlay(popup);

Instead of adding overlays after the preceding map, you can also use the option in the ol.Map constructor, as shown in the following sample:

var map = new ol.Map({
  target: 'map',
  overlays: [popup]
});

The following line was to set the position of the DOM element by matching coordinates and image position:

popup.setPosition(ol3_sprint_location);

The name overlay implies also that there is something at the top of something else. To understand, just see the screenshot of the Chrome Developers Tools Elements panel, as follows:

As you see, the pop-up is included in a div tag, also contained in a div tag with class ol-overlaycontainer situated after the canvas element (where the map is drawn).

Now, let's assemble our knowledge with overlay and map feature methods.

The goal is simple: we are able to display content at the top of the map image but without getting information from the map itself. Let's discover how we can achieve this by again using an example.