Develop Reference

Append table with position is not exactly showing where it was

I am developing a website with Jquery-ui draggables. In the parent div block "container" there are many child draggables which allows user to freely move around the div block.
<div class="container">
<div class="draggable ui-widget-content" id="1">Table 1</div>
<div class="draggable ui-widget-content" id="1">Table 2</div>
...
</div>
I implemented a save function which saves the position of each div block as a json string. It stores the position of the draggables and their IDs. So it can be loaded with where they were at last time.
[{"id":"1","left":"256","top":"226"},{"id":"2","left":"256","top":"632"},{"id":"3","left":"1330","top":"226"},{"id":"4","left":"1330","top":"632"},{"id":"5","left":"818","top":"417"}]
Here's the problem:
I loaded the data from json. It turns out all the position is all wrong.
I recreated using JSFiddle to address the issue: https://jsfiddle.net/braveminds1823/wcmxL2bj/3/
Before saving
After saving, loading the position from json
Edit: I know setting the position to absolute works, but since my website is responsive. The draggables will break out from the container and cover up the web content

You can see from what you've provided in the question (not just the fiddle) that your stored values are not correct.
Looking at just "table" - when you load, it's 20x20, but when you move it further left and up, it's now 256x226 - so clearly not saving correctly.
Your issue is with your use of position
From MDN position:
relative
The element is positioned according to the normal flow of the document, and then offset relative to itself
so the inside squares do not want position:relative, they want position:absolute
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor
So two small changes, in the css:
.draggable {
position:absolute;
}
#containment-wrapper {
position:relative;
}
so that the draggable items are positioned absolutely, relative to the parent wrapper.
Otherwise, your code works fine.
Updated fiddle: https://jsfiddle.net/hrfx9sky/1/

CSS only smooth scrool with offset?

Im using the classic anchor tag approach to click and scroll to a specific div
<div id="scrollTo"></div>
The problem that im facing is that this approach scrolls till the div top margin in on the top of the screen. Is there a way of scrolling it only galf the way with css only, or I will have to use javscript?

You can use another element inside the div.
If you place a positioned element inside the scrollto div with a negative margin. The negative margin will be the offset you want. Make the inner element have a height of 0px, that way it won't be visible to your users.
You will need to put the id on that element of course.
<div id="olddiv">
<div id="scrollTo" style="margin-top: -100px"></div>
</div>

You can look at using an offset on the div you are using for the anchor:
offsetting an html anchor to adjust for fixed header

Style an element based on other element's attribute

I have a position:fixed div that serves as a container for a top menu. I want the following div, which is the container for the rest of the contents, to be placed exactly after the fixed div, to avoid content being hidden under the top div, but also avoid some sort of "blank space" between them.
The basic workaround this is setting a fixed "margin-top" value, but i was wondering if it's possible to set the contents container "margin-top" value to the height of the fixed top menu div using CSS, or is it preferable to do it with JavaScript?
Here's the basic layout example:
<div id="divTopFixed" style="width: 100%; position: fixed; top: 0px;">Some DIVs<br>That create variable height</div>
<div style="margin-top: 40px; width:100%;">CONTENTS<br>...</div>
And a JSFiddle: http://jsfiddle.net/zzcbajtz/

Setting margin-top to a fixed value is usually the right way to go about this.
If you're not sure about the height of the fixed top menu or it changes dynamically based on contents, you can use JavaScript/DOM events to adapt the margin value dynamically (e.g. in case the menu changes height when you resize the window, you could watch for the resize event and adjust the margin value).
I've updated the JSFiddle to show an example of how to tap into the resize event and set the margin by querying the offsetHeight of the fixed element: http://jsfiddle.net/zzcbajtz/2/
window.addEventListener('resize', (function resize(){
document.getElementById('the_div').style.marginTop =
document.getElementById('divTopFixed').offsetHeight + 'px';
return resize;
})());
This code fires when the document is loaded and then again whenever the window is resized.
CSS can't calculate complex layouts like this for you, unfortunately. There's some better support for layouts coming in the future (but I think even that doesn't solve the problem you're experiencing here).

How to place an absolutely positioned img at the top of the page?

I've built a jsfiddle. It is my first, so I am not certain that it is correct but all the code from my small example is there. Nothing cahnges when I run it. On my machine, the click handler is called but I see no change to the position of the viewport. That is the problem, I would like the image to move to the top of the viewport.
Hope this is a better question.
My original question is below:
I have a relatively positioned div that contains some absolute imgs. I want this arrangement to appear at the top of the viewport. I believe that if I can set the top of the div (position:relative) to the top to the viewport, the images it contains will come along.
Problem is, I can't figure out how to do this. The relative div is at the bottom of the page, and when I click on it, I want the document to reposition so it is displayed at the top with its content. I've tried scrollTop with large positive and negative numbers and I can't get the div to reposition.
I've been trying things like:
$(#view2").scrollTop(xxx);
With no luck.
My html looks like the following. Everything but #view2 is absolute, #view2 is relative. The content of #view1 is set dynamically.
<div id="view2">
<img>
<img>
<div id="view1" ></div>
<img>
<img>
</div>

Since you didn't provide some further it's pretty difficult to analyse your problem:
but scrollTop is used like this:
$('html, body').animate({
scrollTop: elementToScrollTo.offset().top
},200);
the parent element of your position absolute container must have position relative.
As i said, it's difficult to answer without proper code snippets of yours

If you just want your container element to sit at the top of your page then use:
#view2 {
position:fixed;
top:0;
left:0;
width:100%;
box-sizing:border-box;
padding:10px;
}
Just an example - obviously if you didn't need padding etc just remove them, the above is just a typical use for a fixed header.

A DIV's style width:"100%" seemingly causes a scroll bar due to lack of fix-width parent DIV

As asked and explained in this question, the problem with the DIV's width set to 100% is that it'll get the window's width and not the enclosed BODY element.
The solution suggested is to place an auxiliary DIV between BODY and the actual DIV and make its width fix. But that just puts the issue to the next level, doesn't it?
Since I don't know the screen size of my users' viewers (let's call it platform independence - a term I've heard somewhere is good to keep in mind when developing for the web, hehe), I need the main-all-mighty-rooted-and-parentest DIV to be filling out all available space without sticking out.
Of course, setting fix width on BODY won't work. Should I go ugly and pull the width of the part of the window that isn't the window, double it (once for each side) and retract that to set the fix width of some root DIV element?!
And if so - how?! I'm unclear on how to obtain the magic width (which, however, might be googleable) but mostly I'm unsure how to enter that parameter into the static CSS file. Will I have to do that dynamically using jQuery and ready function?
Edit
I executed this line from the console.
$("body")[0].outerHTML
The result was as follows - still displaying the scroll bar.
<body style="width: 600px;">
<div id="mapDiv" style="width: 100%; height: 100%; position: absolute;">!</div>
</body>
Then I executed this line.
$("#mapDiv")[0].style.position = ""
Poof, the scroll bar is gone. I thought absolute was the default setting... Apparently it isn't. There's the problem.

Based on your edit if you have that code then you are stretching your body tag to 600px and the <div> inside with absolute position and width 100%.
First the default for position is static.
Since you are using absolute position this happen, is taken off the DOM and search for a new containing block:
The containing block for a positioned box is established by the nearest positioned ancestor
If you don't set the body with any position value then the div is off and takes values in relation to another parent in this case is the window or <html> tag.
Then if you inspect the element is with the dimensions of html tag but positioned where he was in this example http://jsfiddle.net/wZ57C/. Is causing scroll because has 100% dimensions but positioned where body begins wich is at margin 8px aprox. Here you solve the scroll just adding position top:0 left:0 check here http://jsfiddle.net/wZ57C/1/.
But if you want the div be 100% of the body and position:absolute then make the body the relative parent http://jsfiddle.net/wZ57C/2/.