Is there a parent child relationship between absolute and relative positioning in CSS?
I am new to the world of coding as well as CSS. Having read a number of articles regarding relative and absolute positioning, my understanding is as follows. However, I am unsure if an absolute position should be the child of a parent relative position or vice versa.
- There are 4 position properties, that is,
static, relative, absolute and fixed. - If an element has a
relativeposition it is still part of the normal flow of the document. However, it has the ability to be offset by the propertiestop, right, bottom and left. - It also is able to be given a
z-indexvalue and is automatically positioned above static elements - It also provides a method of containing chi开发者_运维百科ld elements that are part of its code block although I am unsure exactly what this means.
Based on this information, does this mean that elements with the position absolute should be children of elements with the position relative or vice versa or does it not matter?
If it does not matter, when would you make them dependent upon one another e.g. parent-child relationship?
There is not really a parent-child relationship.
Relative positioning has nothing to do with absolute positioning. Relative positioning is the same as normal static positioning except that it can be offset top/right/bottom/left, as you explain. The "top/right/bottom/left" values are relative to wherever the element would normally exist in the flow. If you leave out these values, the element is still relatively positioned but it is positioned exactly as if it were statically positioned.
OTOH, when you use absolute positioning, "parent" elements of the absolutely positioned element do matter.
This is because of what LaC's answer explains. With absolute positioning, the "top/right/bottom/left" values are relative to whatever is the nearest parent element to have absolute, relative or fixed positioning. I'll call this the "reference element."
Consider this example fragment:
<body>
<div style="width: 50%;">
<p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
</div>
</body>
The div will be left-aligned, static (normal, in the document flow) position, 50% the width of the body. The p will be a 20px-wide box, in the top-right corner of the viewport:
-------------
| | |P|
| | --|
| div | |
| | |
| | |
-------------
The viewport is the reference element because there are no other parent elements of the p that have absolute/fixed/relative positioning.
Now change the div to be relatively positioned:
<body>
<div style="position: relative; width: 50%;">
<p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
</div>
</body>
The div will appear exactly the same as before, because no top/right/bottom/left offset has been specified. However, the position of the p will change, even though its style hasn't.
That is because, before, the p was aligned to the top-right corner of the viewport, but now there is a closer parent element (the div) with absolute/fixed/relative positioning. So now, the div becomes the reference element and the p will be aligned to its top-right corner:
-------------
| |P| |
| --| |
| div | |
| | |
| | |
-------------
So, just know that whenever you use absolute positioning, you have to think about what the reference element in the document will be. And, you can design your stylesheet so that you choose whatever this reference element is, which makes absolute positioning a very useful layout technique.
Absolute positioning is relative to the nearest ancestor with absolute, relative or fixed positioning. Sometimes it's useful to give an element relative positioning just to establish a new references frame for positioning its children with absolute positioning.
An absolutely positioned element is always positioned in relative to it closet positioned ancestor. If no such ancestor exists, it will be positioned to the viewport which may or maynot be the root element "html" depending on the user agent/browser. An parent is necessirly an ancestor but an ancestor is not necessirly a parent. A child is necessirly an decendant but an decendant is not necessirly a child. Elements with the position absolute may be the children or decendants of the parent which is positioned relative. If they are, they can be positioned in relative to the position of the parent which alreday has a position of either relative or absolute. Oh forget it. Read this
Positioning
加载中,请稍侯......
精彩评论