Develop Reference

Is there setClientBoundingRect()?

getClientBoundingRect is a function that gets a position of element relative to viewport.
Is there a function that is able set value instead?

That's what CSS is for. You use CSS to position your elements in the viewport, and since getting the position of an element relative to a viewport and/or other elements is more problematic, you have getClientBoundingRect (and a lot of other element-specific DOM API methods).

Difference between getBoundingClientRect().top and offsetTop?

What is the difference between getBoundingClientRect().top and offsetTop?
https://codepen.io/anon/pen/bWZWQg
const elem = document.querySelector('#find');
console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top);
console.log('offsetTop: ' + elem.offsetTop);
// Stuff to push the div down the page
<div id='find'>Find me</div>
From my quick test the only difference seems to be the number of decimal places returned.

getBoundingClientRect gives you offset relative to your client viewport, While offsetTop is always fixed static property. although it changes when the actual position of the element changes on document. For real clarification go to pen and you can check the difference your self.
If element is inside relative container then offsetTop will be relative to the given container
pen
console.log('offsetTop: ' + elem.offsetTop); //This is fixed. it get's calculated from beginning of your page to actual element's position.
console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this will changing while scroll, because it's relative to your current view port.
see the pen, scroll the div and while doing that check the console.
In case container of the element is relative then
console.log('offsetTop: ' + elem.offsetTop) // //This is fixed. it get's calculated from beginning of your top most relative container.

The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
getBoundingClientRect() is a very useful, cross browser safe method that returns top, right, bottom, and left position of any element relative to the viewport.

The method getBoundingClientRect may not be as good in performance as offsetLeft (doc here), but if you wanna know an element's position after it transformed by CSS, or even still in transition animation, it is the best choice (maybe the only way).
Here is a Related answer.

How to find offsetTop relative to parent, not window top?

My question is fairly straightforward: How can you find the offsetTop of a child element compared to it's parent element (rather than the window top)?
The definition of offsetTop states that the property will return the value by which a child element is offset from the top of an offsetParent, but this doesn't seem to be the case in this JSFiddle: http://jsfiddle.net/h5KBK/.
My goal is to find the offset of the bolded orange text from the top of the scrollable div, not the window top. Is there any way to do this without calculating the heights of the above elements, paddings, margins, etc. and subtracting it from the offsetTop?
I'm looking for a JavaScript only solution. No jQuery please.

By definition offsetTop returns the top position of the object relative to the top side of its offsetParent element, in pixels.
Now offsetParent needs to be an element with a position other than static. If you change the position attribute of scroll element in your fiddle I get a value of 1012 as opposed to 1110 without the position attribute.

Actually, I did some more research and figured out the answer. The offsetParent must have a specified position:absolute or position:relative declaration, as shown in this JSFiddle: http://jsfiddle.net/h5KBK/1/

Place child of scrollable div center-view

I have a scrollable div somewhere on-screen.
I have a child of that div somewhere in it.
How can I scroll the div to place this child in the center of the visible region?
(How would I determine the visible width and height of the div, and how would I scroll to place a rectangular control centered in this?)

element.scrollIntoView() might be what your looking for.
http://jsfiddle.net/a9s2G/
scrollIntoView docs

If you use jQuery you can try scrollTo plugin.
In pure js this can be done using element.scrollTop. You will need to get position of your element inside <div> and than using that value scroll main div.
To calculate inner element position you will need to get it offset top and left property related to the parent element using offsetTop and offsetLeft properties.
To center your element you may also need to use element.scrollLeft

Javascript position two elements on top of each other

I have two divs one above the other. The second on is absolutely positioned below it (an absolute div inside a relative div).
I want to move the second div on top of the other div, so it appears in the middle.
The procedure for this is to set the style.top of DIV2 to be the same as DIV1, this should in theory position it on top of it. However so far attempts have failed.
The absolute positioning is working correctly, because putting in values moves it correctly, but I think I am using the wrong way to get the height/top values of DIV1.
Ideas?
I tried this:
divLoading.style.top = divContent.style.top;
but it stays where it was.
Edit: The problem isn't how absolute/relative works but which javascript values are the correct ones to use. Using DIV2.style.top = DIV2.style.top - DIV1.clientHeight moves it to the top... but clientHeight is not correct, because if DIV1 changes size, it moves DIV2 way too far upwards.
Edit: offsetTop seems to be zero.

An absolute positioned div inside a relative positioned one, will by default 'borrow' it's top and left position from the relative parent. That means that by setting left:0; top:0 the divs will share the same position.
If you want to move the second div up, you will have to set a negative top (i.e. top: -200px). The top and left properties are relative to the base position, not the body (unless the div isn't in a relative positioned parent, in which case the body is the base position)

If div1 is positioned relative, then the top and left values will move the div relative to where it would have been in the normal flow. So style.top = 10 would move it 10 pixels down from its normal position.
If the position was "absolute", the style.top = 10 would move the div to 10 pixels down from the div it is being positioned relative to (ie, a previous element that had position: relative, or the body of the document)