What's the use of setBindingContext() and the difference from element binding?

In the1.5.2.3 Defining a Binding Pathsection of OpenUI5 demokit:

A context exists either for each entry of the aggregation in case of aggregation binding or can be set explicitly for a control by using the setBindingContext method.

In the1.5.3.3 Element Bindingsection of OpenUI5 demokit:

Element binding allows to bind elements to a specific object in the model data, which will create a binding context and allow relative binding within the control and all of its children.

It seems to me that the two techniques actually do the same thing. They both create a binding context for a control so that bindings of the containing controls will resolve relatively to it. But what's the difference between them? In what scenario will either of them come into play?

ThesetBindingContextdoesn't work in the following code:

https://jsbin.com/bigope/edit?html,output

However, if I changeoPanel.setBindingContext("/nameinfo");tooPanel.bindElement("/nameinfo");, it works, why?