tl;dr : it’s normal that you’re confused because HTML/CSS is not evident and Webflow respect their structure and workflow. This is the reason Webflow WORKS (and the other don’t) and the reason you’re not going to place your elements with a mouse, ever. Instead, learn a bit of HTML/CSS.
I’m going to give you a quick answer, because at this point, you should read about HTML and CSS, the BOX MODEL, and absolute and relative placement. In Webflow, you can get to where you want to go by clicking round, but it’s better if you understand what you do, because with HTML CSS there are always many ways to achieve one goal.
Dragging with the mouse will most likely not happen in Webflow. It would be too hard to transcript into working code. look at the tools who are doing this : Macaw and Adobe Reflow. They are both riddled with bugs because they fail to transcript your things into working code. Macaw doesn’t improve on v2 and I heard Adobe stopped developing Reflow.
Back to Webflow:
Your first screenshot doesn’t depict an align tool but the BOX MODEL tool. It gives margins and paddings to elements. And yes it affects the layout.
As long as you don’t use absolute placement or relative placement with top left right bottom values, all your elements are boxes that display the one below each other. You can make them behave differently by making them inline block or inline, or by applying them float right or left. Remembers, at some point, FLOATS have to be cleared, or it will continue affecting elements below. FLOATS aren’t easy to handle, you need to learn a bit about floating.
Now for the POSITION. Auto means there’s no position declared. Relative means there is a position declared. Relative with no other values doesn’t change the position of an element (from Auto). Add values, and the element moves from where it was before.
Absolute means you’re going to place your element REGARDING THE POSITION OF ITS CLOSEST PLACED PARENT. Placed means has a position, so sometimes you need to declare something Relative just because you need it to be this “placed parent”. So on your absolute element, the values you’re going to give will make it move depending of its placed parent. By default from the top/left corner, but you can change this starting position using the corners and sides icons, they affect the values.
Fixed means it’s placed regarding the whole page.
A grand rule is don’t place element using margins and padding. Another rule is don’t give margins and padding to the same element, prefer nesting to keep control.
http://www.w3schools.com/ is a neat site, your friend for life
Code school https://www.codeschool.com/paths/html-css is so good it makes me cry sometimes. They HAVE A SONG ABOUT CSS !
Mordi don’t be afraid to dive in. You’ll get better at Webflow and you’ll help me helping others (: HTML and CSS are extremely simple to understand. It’s not code, nor script. It’s just description text.