If you are not seeing an absolutely positioned element, you likely do not have a width and height set in its style or there is something going on with its left, right, top or bottom positioning (non existent?) that is causing the element to not be seen.
i tried position: absolute on an element and it got removed from the page and now i'm having concerns about the accessibility of my page.
Have you right clicked on the page where you expect the element to show up and looked in your browsers inspector to see if the element is in fact there or not?
I have included a few examples of position absolute using parent/child elements with varying styling below. Also I have included relevant links to MDN and W3 that I think will help in your understanding of positioning and its relationship to block formatting and what the Document Object Model (DOM) is.
MDN on position
MDN on Block Formatting Context
W3 on DOM
.relative { position: relative; } .absolute { position: absolute; left: 75px; top: 75px; } .parent1 { width: 200px; height: 200px; background: teal; } .parent2 { width: 200px; height: 200px; background: orange; } .parent3 { width: 200px; height: 200px; background: green; } .parent4 { width: 200px; height: 200px; background: purple; } .parent5 { width: 200px; height: 200px; background: yellow; } .parent6 { width: 200px; height: 200px; background: grey; } .child1 { height: 50px; width: 50px; background-color: lightblue; } .child2 { /*this element will not show up as there is no width or height set*/ background: red; } .child3 { /*you will only see the content within this element if present*/ background-color: lightgreen; } .child4 { /*This element will not preside in its parent as the parent element will not be set to relative.*/ width: auto; height: auto; left: 300px; top: 200px; background-color: rgba(45,67,244, 0.2); } .child5 { /*This element will not preside in its parent as the parent element will not be set to relative.*/ left: 300px; right: 400px; top: 300px; bottom: 400px; /* Note there is no background showing on this element! as height and wiodth are not defined*/ background-color: rgba(90,150,90, 0.2); } .child6 { /*This element will not preside in its parent as the parent element will not be set to relative.*/ height: 100px; width: 100px; top: 400px; left: 300px; /* Note there is no background showing on this element! as height and wiodth are not defined*/ background-color: grey; border: 1px solid black; }
<b>NOTE: This snippit will be best viewed in full screen mode</b> <div class="relative">MDN documentation on <i><b>position: absolute:</b></i> The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. <i><b>NOTE:</b></i> The element establishes a new block formatting context (BFC) for its contents. Most of the time, absolutely positioned elements that have height and width set to auto are sized so as to fit their contents. However, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto. </div> <div class="parent1 relative">Parent 1: You can see the absolute positioned element as it has left/right, width and height set <div class="absolute child1">absolute </div> </div> <div class="parent2 relative">Parent 2: You can NOT see the absolute positioned element as its width and height are not set, nor doies it have any content, however, if you look in your console inspector for your browser, you will see the element along with its css selectors within the HTML <div class="absolute child2"> </div> </div> <div class="parent3 relative">Parent 3: You will only see the content and its direct BG within this absolute element as height and width are not present <div class="absolute child3">absolute </div> </div> <div class="parent4">Parent 4: This parent element does not have position relative, lets see where the child resides <div class="absolute child4">Child 4, parent 4, absolute, parent not relative, this set to the div container that is positioned relative </div> </div> <div class="parent5">Parent 5: This parent element does not have position relative, lets see where the child resides <div class="absolute child5">Child 5, parent 5, absolute, parent not relative. </div> </div> <div class="parent6">Parent 6: This parent element does not have position relative, lets see where the child resides <div class="absolute child6">Child 6, parent 6, absolute, parent not relative </div> </div>
