Which of the two CSS properties “Display:” and “Position:”, is more “basic” or “fundamental”.
I was thinking its the position property but I might be wrong and the display of each element is a more fundamental concept then where it is positioned.
Why I try to understand that? I assume it might give me a better whole-concept picture to know if indeed there is an heirarchy and its reason though I don’t think it will give me or anyone else any serious practical contribution.
Philosophically - which is more fundamental / important, a wrench or a screwdriver?
I’m not sure you can think of those two properties like that, as they do different things. They could be used independently, both together, or not used at all (in which case the default behavior of each would kick in). To the best of my understanding, there’s no in-built hierarchy between them.
Could you explain what your thinking is behind the question, and how you think this might affect what you’re trying to achieve?
Thank you for you reply. I’ve edited the question. From my POV: Positioning should be discussed (with students) before Display, as we first position and element, and only then set its display. You are invited to give your thoughts on that… 
No, one does not position an element before changing the display of the element. Those properties are employed independently of one another as needed. Although both may be employed on the same element, they serve different purposes.
My opinion is that you seem determined to connect them in some deterministic order that doesn’t exist.
Well, not as a mainstream paradigm I guess, but what about a personal paradigm? One could start with positioning before displaying if it finds more practical or is looking for a more “algorithmic” way of working, at least for some cases.
I’m still not sure I understand quite what you’re asking, but here goes.
To get an element to behave as you wish, you may need to set display, or position, or display and position, or neither of those things. Which one comes first in your CSS rules doesn’t matter.
You seem to be suggesting, however, that you should write all the “position” declarations, or all the “display” declarations, for a page first, and then go back and add the other. (My apologies if I’ve misunderstood.) That seems to me a very strange approach; I would write all the rules I require for one element, then move on to the next.
From a teaching perspective, there is likely some benefit to thinking about positioning before you get to the display attribute - each HTML element has a default display value anyway (block or inline) - the use of the CSS property only serves to move away from that default for ‘reasons’, whatever they may be.
Positioning however, is not wholly dependent upon the default value of HTML element, but is instead driven by it’s sequence within the HTML source. Using the CSS position property is what’s used to move HTML elements out of that sequence.
From a learning perspective, understanding positioning is likely to be of more use being taught early on in a course of study, as it’s very obvious as to how it affects page layout.I’d suggest (somebody please correct me) that the display property is a rather more subtle tool to be used as a modifier once the basic structure has been established.
Both those properties have a defined relationship so you cannot understand one fully without knowledge of the other. They in interact with each other depending on the values set so both must be understood before you can apply meaning to their context.
The w3c specs define the relationship between those properties in some details so you should take a day or two to read this section and then come back and ask questions on any point that you do not understand as the specs are quite hard reading for beginners but essential to the full understanding of CSS.
It is also important to point out that most layouts can be achieved without using ‘position’ at all so I would avoid teaching beginners to lay out pages use position until they have mastered the other methods of laying out pages because all to often in the forums we see beginners laying out pages using absolute and relative positioning in completely the wrong way and creating unmanageable and unusable layouts. Margins, display table/tablecell, inline-block, floats, flexbox should all be considered before absolute positioning. Relative positioning is rarely used for structural layout unless you are an expert using advanced techniques; in most cases just don;t use it unless it is for a small subtle overlapping effect
.
I did say someone would correct me - thanks @paulob 
I think that what you said was mostly pretty accurate. Positioning is important which often means not using the CSS property ‘position’ (Language and css terminology sometimes conflict).
The problem and beauty of CSS is that there are many interactions between properties so you can’t really isolate properties on their own because the way things ultimately behave will depend on the various properties applied (or not applied).
Yeah, the difference between the property position and positioning were my undoing.
I meant that I would do so only when I think it’s needed or beneficial to better organize the work, but not in all cases…
Hi Paulo. I already know what I personally feel I need to know about the practical work with these properties: I think I should have emphasized more that I ask this question in a total philosophical\didactic context: I was wrong not to emphasis the didactic importance of doing what I described.
I usually avoid layout with the position property and prefer other methods like display\float\columns.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.