Of course, if you were developing a more standard website, such as a site providing some public service, absolute positioning overrides the default flow layout of browsers and so will reduce accessibility for many users. In this case I would avoid it. Having said that, a lesser known benefit of absolute positioning is that it allows localized absolute positioning within the nearest "positioned" parent element.
Note: A "positioned" element can be any of the following: relative, fixed, absolute, or sticky. This gives a nice precise control over nested elements on a page, without sacrificing the overall page flow-layout.
So to answer your question relative positioning being preferred over absolute : I don't believe there is a correct answer, it depends on what you are needing to build.
However in general positioning absolute or relative versus default flow layout, my approach is as described above. Keep in mind also that absolute positioning is not only used for positioning things relative to the browser window - it's also used for positioning things accurately within a containing element.
Relative positioning is nice if you can pull a totally fluid layout because it will look reasonable on a large range of screen resolutions. That being said, it's quite often to find especially when trying for cross-browser compatability with older versions , that totally fluid layouts are hard to get right. Falling back on absolute positioning shouldn't be frowned upon, most mortal web developers do it all the time. Some things are impossible to do without position:absolute. So, my advice: just use the one that fits your needs It seems to me like I'm the only one here that totally disagree with the assumption that absolute posititioning is not a bad practice Except conditions like animation or elements that should specifically sit in an "unusual" place whitin their parents, absolute positioning break the structure of your HTML which is exactly what HTML suppose to define in my opinion because you can achieve results that differ the visuality from the structure very easily.
Moreover, implementation of design is way harder and problematic with absolute because you need to measure every element and you have lot of place to mistake against normal flow that is much easier and right for structure building of a website skeleton.
And finally, regarding the chess board, I believe that the hardest possible way to create it is using position absolute! Making the board with table would be much easier and right after all this is a table And personally I would do it with a cube class that would have float: left with clear on every ninth cube. IMO, not a bad thing at all. There were certain layouts which were only achievable because of absolutely positioning! Even certain components like buttons where layering was needed transparencies were possible only because of absolute positioning.
If someone has a better way, please refer me to that. Absolute positioning is a tool, like any tool, it can be used in good and bad ways. There is nothing wrong with it: StackOverflow probably uses it to display its alerts in the orange bar at the top of the site. Now, in your situation, this is not bad either. But I think it would be much easier for you not to use it. A chess board is a table, table cells don't need position tweaks. Why would you even need pixels calculation?
So don't be stressed by the quality of your practice, but maybe you could check if you really need absolute positioning. Stack Overflow for Teams — Collaborate and share knowledge with a private group.
Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Is it considered bad practice to use absolute positioning? Asked 13 years, 1 month ago. Active 6 months ago. Viewed 33k times. Improve this question. Herb Caudill Jason Etheridge Jason Etheridge 6, 5 5 gold badges 28 28 silver badges 32 32 bronze badges. For games where you might use absolute positioning, you could probably benefit from HTML5 canvas instead, especially if you plan to add animations.
Add a comment. Put it back again afterwards Note: Yes, margins still affect positioned elements. Margin collapsing doesn't, however. Which element is the "containing element" of an absolutely positioned element? This is very much dependent on the position property of the ancestors of the positioned element See Identifying the containing block. If no ancestor elements have their position property explicitly defined, then by default all ancestor elements will have a static position.
The result of this is the absolutely positioned element will be contained in the initial containing block. We can change the positioning context , that is, which element the absolutely positioned element is positioned relative to.
This is done by setting positioning on one of the element's ancestors: to one of the elements it's nested inside of you can't position it relative to an element it's not nested inside of.
To see this, add the following declaration to your body rule:. All this absolute positioning is good fun, but there's another feature we haven't considered yet. When elements start to overlap, what determines which elements appear over others and which elements appear under others?
In the example we've seen so far, we only have one positioned element in the positioning context, and it appears on the top since positioned elements win over non-positioned elements. What about when we have more than one? At this point you'll see the first paragraph colored lime, moved out of the document flow, and positioned a bit above from where it originally was. It's also stacked below the original. This is because the. Can you change the stacking order? Yes, you can, by using the z-index property.
You may recall from previous points in the course where we discussed web pages using horizontal x-axis and vertical y-axis coordinates to work out positioning for things like background images and drop shadow offsets. For languages that run left to right, 0,0 is at the top left of the page or element , and the x- and y-axes run across to the right and down the page.
Web pages also have a z-axis: an imaginary line that runs from the surface of your screen towards your face or whatever else you like to have in front of the screen. By default, positioned elements all have a z-index of auto , which is effectively 0. To change the stacking order, try adding the following declaration to your p:nth-of-type 1 rule:. Note that z-index only accepts unitless index values; you can't specify that you want one element to be 23 pixels up the Z-axis — it doesn't work like that.
Higher values will go above lower values and it's up to you what values you use. Using values of 2 or 3 would give the same effect as values of or Let's now look at fixed positioning. This works in exactly the same way as absolute positioning, with one key difference: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor the initial containing block if there isn't one , fixed positioning usually fixes an element in place relative to the visible portion of the viewport.
An exception to this occurs if one of the element's ancestors is a fixed containing block because its transform property has a value other than none.
This means that you can create useful UI items that are fixed in place, like persistent navigation menus that are always visible no matter how much the page scrolls. Let's put together a simple example to show what we mean.
First of all, delete the existing p:nth-of-type 1 and. Now update the body rule to remove the position: relative; declaration and add a fixed height, like so:.
Add the following rule to your CSS:. The top: 0; is required to make it stick to the top of the screen. We give the heading the same width as the content column and then a white background and some padding and margin so the content won't be visible underneath it. If you save and refresh, you'll see a fun little effect of the heading staying fixed — the content appears to scroll up and disappear underneath it.
But notice how some of the content is initially clipped under the heading. This is because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We could improve this by moving the paragraphs all down a bit. We can do this by setting some top margin on the first paragraph.
Add this now:.
0コメント