According to the link, an element with absolute positioning is placed in relation to its first parent element that has a position other than static. If no such element exists, then it refers to the containing block which is <html>
It seems like absolute positioning is actually relative. So why not just use relative positioning instead? Are there specific scenarios where absolute positioning is necessary and cannot be achieved using relative positioning?
Relative is not always absolute.
Actually, they are quite different in terms of their impact on the document flow.
A relative positioned element follows the normal flow of the document, whereas an absolute positioned element is removed from that flow entirely.
Can absolute positioning offer unique benefits that relative positioning cannot?
Imagine you want a title to appear when hovering over an image. In this case, you would need to use absolute positioning for the title element relative to the image container, which should be positioned relative. If you fail to set position: relative; on the parent element containing the absolute elements, they will float freely outside of any constraints.
Another Example (Without a relative position, absolute elements can drift aimlessly)
In essence, absolute positioned elements do not occupy physical space within the document layout as they exist independently of it. To prevent them from causing chaos, we utilize a relative positioned container element. Conversely, relative positioned elements contribute to the natural flow and spacing of the document. When you move an absolute positioned element around, it won't disrupt other elements, unlike moving a position: relative; element which can affect the layout of neighboring components.
When using relative positioning for an element, it will stay within the document's flow. Any additional positioning applied will move the element from its original position.
On the other hand, with absolute positioning, the element is taken out of the normal document flow and positioned in relation to its first non-static parent element.
For example, consider the following HTML structure along with a related demo:
<div class="awesomeParent">
<ul>
<li>First Piggy</li>
<li>Second Piggy</li>
<li>Third Piggy</li>
<li>Fourth Piggy</li>
</ul>
</div>
By comparing the fiddles with relative and absolute positioning, you can observe the differences.
In the relative positioning fiddle, the space where the third list item should be remains, but it is offset by the top: 40px; rule.
However, in the absolute positioning fiddle, the space for the third list item disappears. This means that the element is no longer part of the regular document flow, and the positioning is now based on its nearest non-static parent element, which in this case is the .awesomeParent div with position: relative. If no suitable parent is found, the positioning would default to the html element. To position an element absolutely within another, the parent must have a fixed, absolute, or relative position.
Visual aids are included below for comparison:
My SVG isn't scaling to 100% width in Safari like it is in IE, Chrome, and Firefox. Despite numerous attempts, I haven't been able to make my SVG stretch across the full width like it does in other browsers. The project is built using React. . ...
After running the code, I encountered an issue where the first image displays but then after one second, only a white blank screen appears with no further action. It seems like there may be an error in the JavaScript code. Below is the code that was attemp ...
Ever since I made the transition from AngularJS to Angular2, I've been facing a peculiar issue. The select element's options data is fetched from a Solr query, which always returns a 200 response with the data in a timely manner. However, the pr ...
Here is the HTML code I am working with: <div id="container"> <video id="video" src="video.ogv" loop></video> </div> The "container" div and video element occupy the entire screen. #container { po ...
I am experiencing an issue where a div with a fixed height displays a scroll bar on browsers but not on an Android phone. <ion-scroll style="height:300px;" scrollbar-y='true'> //content </ion-scroll> ...
I am trying to set up a simple div container that displays contact information in a formatted list (<ul><li>). Clicking on the div currently takes you to the user's profile page, which is functioning correctly. However, I am facing an iss ...
I'm new to PHP and HTML, so please be patient with me. I've been attempting to populate a select box using data from a MySQL database, but all I see is an empty textbox. Here's my current code: <select name="cargo"> <?php ...
I'm working on an inline flex div where I want to create a unique effect using the words wrap and the div overflow. As the window is resized, some of the words in the sentence will disappear, altering the meaning. The width will determine the result: ...
I am in the process of incorporating a countdown timer but with an analog clock rather than a digital one. My objective is to emphasize the next 25 minutes as a circle sector that commences from the minute hand on the clock. Here is what I have developed ...
Lately, I've been working on creating HTML and CSS pages. However, whenever I load a page, I notice that there's always a brief half-second flash of the HTML content without any styling applied. Does anyone have an idea why this is happening and ...
Is there a way to automatically populate the Address field of a client in a textarea based on the input of the client's name in an input field? I have created a 'for loop' to retrieve a datalist of client names. For the address, I retrieved ...
Prior to beginning a new project, I'm interested in exploring the possibility of implementing a sliding sidebar for mobile and tablets. On desktop, however, I envision a fixed sidebar that is part of the main container layout as shown below: <div ...
I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...
Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...
Hello, I am currently working on incorporating a color scale into my heat map using the d3.schemeRdYlBu color scheme. However, I am facing challenges in getting it to work properly as it only displays black at the moment. While I have also implemented a ...
Issue specific to Google Chrome and Windows 10 I'm currently working on a flipbook that adjusts content size using transform:scale() based on the user's screen size. There is also a zoom feature that allows users to adjust the scale factor. I ha ...
Looking to validate a form before running a JavaScript function? Check out this code snippet: function updateMap() { //dummy } <form> <div class="group"> <input type="number" id="hour" min="0" max="23" required> <span cl ...
Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...
I am working on a project that involves a menu system. One of the features I am implementing is that when a tree within the menu is opened, it receives the "active" class. My goal now is to dynamically retrieve the deepest sub-menu within this structure ...
Take a look at this JSON data : { department_1 : [{ id : 1, name = Joe Smith, email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660c150b0f120e2613150048030213">[email protected]</a>}, ...., { id : 500, name ...