FAQ: CSS Display and Positioning - Position

This community-built FAQ covers the “Position” exercise from the lesson “CSS Display and Positioning”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Position

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 (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 (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

1 Like

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

.question {
  text-align: center;
  position: relative;
  top: 40px;
}

Doesn’t this do the exact same thing?

.question {
  text-align: center;
  margin-top: 40px;
}

What would the difference be and what can we use each one for?

This post explains it:

1 Like

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.

if using position: static is the same as default why does the code for it even exist?

Because in order for the default style sheet to have that property, it would have to exist in CSS.

1 Like

In this lesson, it says:

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

So this course you guys are talking about is css global positioning?

Can’t we already do this using the margin property?

Can you please explain flow again?

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.

1 Like

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?

Normal flow, yes. The operative word is normal.

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.

Ok, I think I understood.

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.

1 Like

Ok, thank you so much! I’m sure it will make even more sense as I progress through this lesson

1 Like

In the browser to the right you can see block-level elements also consistently appear on the left side of the browser.

I don’t see them appearing on the left side, I see them appearing in the center side.

Am I missing something here?

1 Like