There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
What is the point of relative positions if we can achieve the same layout by setting a margin value? To further illustrate, say the following code in this exercise
The object needs to move from some place, so how is the default value of the object’s position created? Like, the position value before you move the object.
In the browser to the right you can see block-level elements also consistently appear on the left side of the browser. This is the default position for block-level elements.
The default position of an element can be changed by setting its position property.
I fail to understand how this is true! I thought the position of an element could be changed using the margin (adds space to the outside of an element’s box), padding (adds space between an element’s content area and its border), and text-align (aligns inline content) properties. What exactly is the position property?
Unlike margins which have no bearing on normal flow, the position property can be used to take an element out of normal flow, or to offset it from its normal flow position. When you begin to study each of the optional values it will become more clear.
How does the browser apply default styles to elements in the first place? There is a stylesheet with many rule sets that add these default styles. This stylesheet is called the user agent stylesheet. However, for the user agent stylesheet to actually style elements, it must use valid CSS. So to add a default position property, it must assign it a value using a CSS declaration. For this, the default value must actually exist
Normal flow is top down, left to right. Block level elements default to full width and all start from the left edge, one under another.
Margin is part of the box model; top and left are not, as I understand them. They are used to shift the element down and over, including that element’s margins.
So, theoretically speaking, we could use the margin property to position an element in some cases instead of using the position property along with the top, bottom, left and right properties. However, that does not mean we should, am I correct?
Now onto flow. From what I understood, flow is the order the browser uses to render elements in an HTML document with no CSS applied - top to bottom, left to right. Is that right?
Margins have a direct effect on the content area since they are bound by the limits of their container. top, etc. does not affect the size of the box when it shifts it. That means it can escape the bounds that margin cannot. You’ll need to do some reading to come up with suitable use cases for offsets, but just know they are not margins.
About flow though. If flow is the order the browser uses to render elements, and normal flow is top, bottom, left, right, why can people say, “elements can be taken out of the flow”?
I understood margin vs offset, but I’m still a bit unsure of flow
Normal flow is the browser’s own rendering according to the nature of the objects. When taken out of normal flow it no longer adheres to standard rendering. That means it can be above (as in an overlay) the normal content. You’ll see more about this when you get into the position property values and how they affect normal flow.
Oh ok! So normal flow is just the order the browser renders elements in an HTML document in. The elements defined earlier than others in the HTML document will be on top of the others if they are block-level elements. If they are inline, they will be furthest left. top to bottom, left to right
<h1>First!</h1>
<h1>Second!</h1>
In the example above, the <h1> with content of “First!” will come before the <h1> with content of “Second!” on the web page. This is normal flow. But with the position property, it is possible to take an element out of the normal flow. So even if an element was defined after another element in the HTML document, it is possible to make it come on top of the elements defined before it
Pretty much. An element that is taken out of normal flow can be positioned anywhere without affecting the rest of the content. When you get to float you’ll witness similar behavior.
) below.
) to up-vote the contribution!