<h2>Absolute positioning as bad practice</h2>

<p>Referencing the StackOverflow question, "<a href="https://stackoverflow.com/questions/186044/is-it-considered-bad-practice-to-use-absolute-positioning">Is it considered bad practice to use absolute positioning?</a>", the consensus is, just like nearly everything in CSS, "it depends".</p>

<p>But let's just throw some data at the topic:</p>

<ul>
<li>More than 50% of website traffic is presumed to be from a mobile
device. Using absolute positioning (especially when positioning from
<code>body</code>) will impact how mobile viewers see your content. </li>
<li>There are
literally thousands of possible combinations for screen sizes and
resolutions. Positioing absolutely will break on most viewports.</li>
</ul>

<p>These are the two biggest reasons to rely on document flow as opposed to positioning the elements yourself. But obviously, the student(s) are trying to solve a problem they have with the hammer they have.</p>

<p>So, maybe instead of trying to convince them <em>not</em> to, show them how bad it performs under real world situations and provide some alternatives.</p>

<h2>Define the problem</h2>

<ul>
<li>Open a browser like Chrome, and using the bottom left corner of the browser window, resize the window. Elements positioned to flow around constraints will reposition, absolute elements will not.</li>
<li>Also in Chrome, open the developer tools and open the "device tool bar". This will allow you to look at the page in a simulated screen resolution for a number of devices.</li>
<li>Visit the web page on the student's phone. Switch the phone between horizontal and vertical views.</li>
</ul>

<h2>Better Practice</h2>

<ul>
<li>Use a grid. There a number of grids available like those that come standard with <a href="https://getbootstrap.com/" rel="noreferrer">Bootstrap</a>, but sites like css-tricks.com also have a number of smaller implementations that actually describe the basics of a grid, like <a href="https://css-tricks.com/dont-overthink-it-grids/" rel="noreferrer">this nice one</a> from Chris Coyer.</li>
<li>Be right on the cutting edge and teach <a href="https://drafts.csswg.org/css-grid/" rel="noreferrer">grid layout directives</a> that are only in draft proposal (but work in some canary browser releases) <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="noreferrer">this other tutorial</a> on the Mozilla Dev Network.</li>
<li>Be less on the cutting edge and teach <a href="https://www.w3.org/TR/css-flexbox-1/" rel="noreferrer">Flex</a>.</li>
<li>Introduce viewports to trigger css changes at certain screen size</li>
</ul>

<p>After some or all of these, reflect by going through browser resizing, etc. explained above.</p>

<h2>Some other talking points</h2>

<p>I'm not sure what kind of project the student is creating, but some other things to consider under certain circumstances:</p>

<ul>
<li>Their experience with x, y coordinates will help them a lot if they are doing game development or graphics within a <code>canvas</code> tag or creating SVGs. Discuss when those are appropriate to use in HTML (SVG icons for links under certain viewports, eg).</li>
<li>Discuss content visibility and re-flow on devices of different resolution. Moving or hiding information based on user context (are they on 
a desktop with lots of viewable space and a mouse, or are they on an iphone 4 and just want to click the 'buy' button?).</li>
</ul>

CC BY-SA 3.0
2018-03-07T18:29:32.743Z
Great points here. Show the students why absolute positioning isn't great for the web where the viewport could be any set of dimensions.
Gorchestopher H
CC BY-SA 3.0
2018-03-07T23:42:43.733Z
I just tried this page in responsive design mode. It is a mess, unless you trick the server into thinking you are on a phone. If it thinks you have a desktop, then in assumes that you have a wide (>1024) screen. The style sets min-width multiple times. I am going to look in to setting the browser name to some phone permanently to trick the server.
ctrl-alt-delor
CC BY-SA 3.0
2018-03-07T13:56:59.207Z
2018-03-07T13:56:59.207Z
Jed Schneider
<p>I'm not sure how you teach these things, but you may have a misconception about learning that is getting in the way. This seems to be common with newer teachers who don't yet show the scars of many student engagements. </p>

<p>I suspect that you see the relationship between theory and practice fairly clearly. So you explain something to students (possibly at a fairly high, conceptual level) and think that they will be able to make the same connections that you do. But they likely won't, since they don't have your background and experience. </p>

<p>In this particular case, I'd suggest that you give them lots of sample CSS that they can emulate and also (a smaller set) of poor examples and show them the consequences when change is needed. Do this as part of your introduction to creating HTML docs, not as an after-the-action correction. Integrate it into your teaching. </p>

<p>Some of the students will be able to make the leap immediately without this, of course, but many need to learn by example, not by inference. You need to reach all of the students in any teaching situation and all of them learn differently (learning "modalities"). </p>

<p>I once wrote a book on a topic important to me, but did so soon after becoming thoroughly familiar with it. It was important to me, in that book, to be able to connect with the beginner's mindset before I forgot how hard it was for me to get started with the topic. Teacher's too often forget how hard their own path was and expect others to have an easier time. New teachers also often don't yet realize that their students aren't like themselves, with different motivations and different ways of thinking. </p>

<p>In general, you need to repeat yourself when teaching, but not in the same words and not with the same tools. Each explanation will, one hopes, reach a large fraction of the students. Each re-teaching (explanation, demonstration, exercise, ...) will likely reach more. Ultimately you want to reach them all, but no one thing will reach more than a fraction. </p>

<p>As a young teacher I once thought that my explanations were so clear and brilliant that no-one could possibly misinterpret them, and that deep ideas (in this case in Statistics) would become immediately clear to all. In actually, I probably got through to about 5% of them. Luckily I learned not to do that anymore. </p>

CC BY-SA 3.0
2018-03-07T14:08:25.093Z
2018-03-07T14:08:25.093Z
Buffy
<p>I'm teaching a student how to create website front ends. This student comes from a SNAP/Scratch/AppLab type environment where they learned basic programming concepts, but to position visual elements they had to either drag and drop or set an x and y coordinate.</p>

<p>This student has an issue where they make every HTML element positioned absolutely, so they can specify x and y (with <code>left</code> and <code>top</code>). This is not considered "best practice" in HTML and makes modifications to their work challenging, and causes other issues in their work. Generally, this is a bad habit I'd like to break them of.</p>

<p>How can I get this student to understand and utilize the normal document flow instead of just thinking about it as x and y coordinates?</p>

CC BY-SA 3.0
2018-03-07T03:20:12.890Z
Have they been introduced to CSS?
Jed Schneider
CC BY-SA 3.0
2018-03-07T03:32:21.827Z
@JedSchneider Yes, they have. It's in their stylesheets where they consistently use absolute positioning. Also, when I ask them to avoid it, they can't seem to do it unless I effectively feed them the code. And in that case, they're just copying what I say, not learning anything.
thesecretmaster
CC BY-SA 3.0
2018-03-07T12:46:19.823Z
In my experience, even feeding them code eventually takes root.  And some students have to be fed in this way for a long time before that light goes on in their heads.  If you can, continue to patiently remind and explain.
Java Jive
CC BY-SA 3.0
2018-03-07T18:44:26.330Z
Perhaps the students were introduced to the absolute positioning properties too early? It's very hard to learn to do something in-place-of something else you already know how to do. If course time permits, maybe you need to re-introduce the topic of layout with some very simple examples, such as those on this page: https://www.w3schools.com/css/css_positioning.asp
Gorchestopher H
<best-practice><web-development><front-end><css>
How to help students comprehend the HTML document flow?
# How to help students comprehend the HTML document flow?

(Asked by: username_0 on 2018-03-07)

I'm teaching a student how to create website front ends. This student comes from a SNAP/Scratch/AppLab type environment where they learned basic programming concepts, but to position visual elements they had to either drag and drop or set an x and y coordinate.

This student has an issue where they make every HTML element positioned absolutely, so they can specify x and y (with `left` and `top`). This is not considered "best practice" in HTML and makes modifications to their work challenging, and causes other issues in their work. Generally, this is a bad habit I'd like to break them of.

How can I get this student to understand and utilize the normal document flow instead of just thinking about it as x and y coordinates?

**Tags:** best-practice, web-development, front-end, css

> **Comments:**
> **username_1**: Have they been introduced to CSS?  
> **username_0**: @JedSchneider Yes, they have. It's in their stylesheets where they consistently use absolute positioning. Also, when I ask them to avoid it, they can't seem to do it unless I effectively feed them the code. And in that case, they're just copying what I say, not learning anything.  
> **username_2**: In my experience, even feeding them code eventually takes root.  And some students have to be fed in this way for a long time before that light goes on in their heads.  If you can, continue to patiently remind and explain.  
> **username_3**: Perhaps the students were introduced to the absolute positioning properties too early? It's very hard to learn to do something in-place-of something else you already know how to do. If course time permits, maybe you need to re-introduce the topic of layout with some very simple examples, such as those on this page: https://www.w3schools.com/css/css_positioning.asp  

---

## 2 answers

### Answer by username_1 on 2018-03-07. Score: 5

## Absolute positioning as bad practice

Referencing the StackOverflow question, "[Is it considered bad practice to use absolute positioning?](https://stackoverflow.com/questions/186044/is-it-considered-bad-practice-to-use-absolute-positioning)", the consensus is, just like nearly everything in CSS, "it depends".

But let's just throw some data at the topic:

* More than 50% of website traffic is presumed to be from a mobile
  device. Using absolute positioning (especially when positioning from
  `body`) will impact how mobile viewers see your content.
* There are
  literally thousands of possible combinations for screen sizes and
  resolutions. Positioing absolutely will break on most viewports.

These are the two biggest reasons to rely on document flow as opposed to positioning the elements yourself. But obviously, the student(s) are trying to solve a problem they have with the hammer they have.

So, maybe instead of trying to convince them *not* to, show them how bad it performs under real world situations and provide some alternatives.

## Define the problem

* Open a browser like Chrome, and using the bottom left corner of the browser window, resize the window. Elements positioned to flow around constraints will reposition, absolute elements will not.
* Also in Chrome, open the developer tools and open the "device tool bar". This will allow you to look at the page in a simulated screen resolution for a number of devices.
* Visit the web page on the student's phone. Switch the phone between horizontal and vertical views.

## Better Practice

* Use a grid. There a number of grids available like those that come standard with [Bootstrap](https://getbootstrap.com/), but sites like css-tricks.com also have a number of smaller implementations that actually describe the basics of a grid, like [this nice one](https://css-tricks.com/dont-overthink-it-grids/) from Chris Coyer.
* Be right on the cutting edge and teach [grid layout directives](https://drafts.csswg.org/css-grid/) that are only in draft proposal (but work in some canary browser releases) [this other tutorial](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) on the Mozilla Dev Network.
* Be less on the cutting edge and teach [Flex](https://www.w3.org/TR/css-flexbox-1/).
* Introduce viewports to trigger css changes at certain screen size

After some or all of these, reflect by going through browser resizing, etc. explained above.

## Some other talking points

I'm not sure what kind of project the student is creating, but some other things to consider under certain circumstances:

* Their experience with x, y coordinates will help them a lot if they are doing game development or graphics within a `canvas` tag or creating SVGs. Discuss when those are appropriate to use in HTML (SVG icons for links under certain viewports, eg).
* Discuss content visibility and re-flow on devices of different resolution. Moving or hiding information based on user context (are they on
  a desktop with lots of viewable space and a mouse, or are they on an iphone 4 and just want to click the 'buy' button?).

> **Comments:**
> **username_3**: Great points here. Show the students why absolute positioning isn't great for the web where the viewport could be any set of dimensions.  
> **username_4**: I just tried this page in responsive design mode. It is a mess, unless you trick the server into thinking you are on a phone. If it thinks you have a desktop, then in assumes that you have a wide (>1024) screen. The style sets min-width multiple times. I am going to look in to setting the browser name to some phone permanently to trick the server.  

---

### Answer by username_5 on 2018-03-07. Score: 4

I'm not sure how you teach these things, but you may have a misconception about learning that is getting in the way. This seems to be common with newer teachers who don't yet show the scars of many student engagements.

I suspect that you see the relationship between theory and practice fairly clearly. So you explain something to students (possibly at a fairly high, conceptual level) and think that they will be able to make the same connections that you do. But they likely won't, since they don't have your background and experience.

In this particular case, I'd suggest that you give them lots of sample CSS that they can emulate and also (a smaller set) of poor examples and show them the consequences when change is needed. Do this as part of your introduction to creating HTML docs, not as an after-the-action correction. Integrate it into your teaching.

Some of the students will be able to make the leap immediately without this, of course, but many need to learn by example, not by inference. You need to reach all of the students in any teaching situation and all of them learn differently (learning "modalities").

I once wrote a book on a topic important to me, but did so soon after becoming thoroughly familiar with it. It was important to me, in that book, to be able to connect with the beginner's mindset before I forgot how hard it was for me to get started with the topic. Teacher's too often forget how hard their own path was and expect others to have an easier time. New teachers also often don't yet realize that their students aren't like themselves, with different motivations and different ways of thinking.

In general, you need to repeat yourself when teaching, but not in the same words and not with the same tools. Each explanation will, one hopes, reach a large fraction of the students. Each re-teaching (explanation, demonstration, exercise, ...) will likely reach more. Ultimately you want to reach them all, but no one thing will reach more than a fraction.

As a young teacher I once thought that my explanations were so clear and brilliant that no-one could possibly misinterpret them, and that deep ideas (in this case in Statistics) would become immediately clear to all. In actually, I probably got through to about 5% of them. Luckily I learned not to do that anymore.


---

