I'm diving into HTML and CSS layouts and came across an example in Mozilla's tutorial about positioning. In the section about positioning, there's a sample where the first line of CSS is just `position: relative` with no selector. I showed this to AI tools like Gemini and ChatGPT, and they pointed out it's actually invalid syntax that should have no effect on the layout. But it does alter the layout in the Mozilla playground and also messes things up when I try it on my own page. I'm really confused about why this line is included in their playground.
5 Answers
Actually, that paragraph does suggest updating the previous code to use `position: relative`. It’s just building on what was discussed before!
I think the reason it's in the Mozilla playground is that mistakes happen. It’s written by people, after all! If it really seems off, you might want to file a bug on GitHub—MDN team usually responds pretty quickly.
That example is probably not meant to be used standalone; it’s a snippet pulled from a larger example that includes selectors. So it’s likely assuming you have the full context from the prior code.
But when I open the playground in a different tab to fiddle with it, it shows that line right at the top! Doesn’t that suggest it should work on its own?
Could it be that the `position: relative` line is just a comment that's not appearing right? The selector below has `position: relative` again, so it might be a misunderstanding in formatting.
Exactly! It seems like the example was trying to illustrate the `position: relative` in the body section. I was worried I was missing something that more experienced folks get!
It's a work in progress! Tutorials can sometimes have those little hiccups. Just keep experimenting, and you'll get the hang of it.
I've reported issues like that before; they really do tend to be on it! It's worth a shot.