Position absolute at the bottom must not disrupt the text's natural flow

Is it feasible to position an element absolutely at the bottom within its relative parent while maintaining the flow of its text content from top to bottom?

This is a sample layout I am referring to ---

<div class="relative" style="padding-bottom: 2em;">
    <div style="position: absolute; bottom: 0;">Bottom! Can I have regular text flow, please?</div>
    <div style="height: 10em;"></div>
</div>

--- and here is the Fiddle link: https://jsfiddle.net/x507Ljyh/

I am also open to any innovative solutions, such as pseudo-elements, etc. Just kindly refrain from altering the order of elements in the markup.

Thank you!

Edit

I understand that elements with absolute positioning "do not occupy space," which is fine - the gray article element has ample padding-bottom due to this characteristic.

All I require is for the text in the h1 element to flow normally from top to bottom as in a regular element. Therefore, a lengthy title like "The Idler Wheel Is Wiser Than the Driver of the Screw and Whipping Cords Will Serve You More Than Ropes Will Ever Do" should conclude at the bottom of the gray article element (and occasionally overflow to the bottom).

A similar issue concerning floats can be found here: HTML float right element order

Does this explanation make sense?

Edit 2

Many thanks to @RoToRa for resolving my concern using Flexbox. Nevertheless, I am still curious if it is possible to reverse the text content flow of absolute elements to normal somehow, so I will keep this question active.

htmlcsscss-position

Answer №1

For those who are comfortable only catering to the most up-to-date browsers, utilizing flexbox layout and adjusting the sequence of elements may be a viable option:

section {
    display: flex;
    flex-direction: column;
}

section > h2 {
    order: 2;
}

section > ul {
    order: 1;
}

https://jsfiddle.net/k7r23mfq/

Answer №2

When an element is set to "position: absolute;", it does not take up space in the page layout which can cause elements like paragraph text and headers to overlap. One way to fix this is by adding padding to the bottom of the blockquote element so that there is enough room for the header text.

blockquote {
    padding-bottom: 100px;
}

However, the downside to this solution is that it may not be very flexible if you have varying sizes of headers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate a click event on an element using Simple HTML DOM

I need assistance in triggering a click on the element below and then retrieving its innertext. <a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">Show result</a> Once the "onClick" event is triggered, the elem ...

javascriptphpjqueryhtmlsimple-html-dom

A guide on displaying names individually in AngularJS

HTML <ul class="ul_nav"> <li ng-repeat="teams in teamArray" style="-webkit-animation-delay: {{$index * 150}}ms"> {{teams.team_name}} </li> </ul> In this section, I am able to sh ...

angularjshtmlcssangularjs-ng-repeat

CSS - How can text and images be effectively combined for a visually appealing design?

We're tasked with designing text in the following format: Text in English XXX Text in English XXX Text in English. The XXX placeholders need to be replaced with images that have the same height as the English text. Is there a better solution for th ...

css

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...

javascriptcssreactjscarouselreact-bootstrap

Is your CSS file functioning properly in Chrome but not in Internet Explorer?

I recently developed a custom SAP Portal Component that includes a JSP file with Javascript. This component is placed on a SAP Portal page alongside another iView, which contains multiple headers and text within an iframe. My objective is to dynamically ge ...

javascriptjqueryhtmlcss

What changes do I need to make to improve the responsiveness of my website?

What changes do I need to make to my website's responsiveness for viewing on phones? You can view my website here, and the link to the responsive code here. I'm hoping someone can help me with the correct code so I can update my website's r ...

css

Placing Bootstrap nav-items outside of the justify-content-center alignment

Having trouble positioning a button in the nav container to the right side of the screen while keeping all other nav items centered using justify content center. I've tried the following solutions: Using margin-left:auto on the button, but it shifts ...

htmlcsstwitter-bootstrapflexbox

Understanding iterative processes in EJS

I've got an array with some HTML content stored in it like so. const articleArray=['<p>first text</p>\r\n','<p>second text></p>\r\n','<p>third text</p>\r&bso ...

htmlnode.jsexpressejsbackend

Show another div once you've scrolled beyond the first

Instead of following tutorials that make a div appear after scrolling down a set number of pixels, I am looking to achieve something different. I want a div to appear when the user scrolls past another div, and then disappear again when they scroll back up ...

javascriptjqueryhtmlcssscroll

The search box in the navbar of the website appears differently on Chrome compared to Firefox when using Twitter

I'm currently facing an issue with the navbar on my website. In Chrome, everything is displayed perfectly in one line - the logo, links, and search box with a button. However, when I switch to Firefox, the layout gets all messed up like this: Below i ...

htmlcsstwitter-bootstrapfirefoxtwitter-bootstrap-3

Is there a way to eliminate the shadow effect appearing on product photos in BIG CARTEL?

While using the Luna theme on my Big Cartel store, I noticed that the products are hard to see on mobile devices because of the box shadow effect. I found a solution on a Big Cartel help page recommending to add a specific code to the CSS, but when I tried ...

cssthemesbigcartel

Showing the heading again after a new page starts

Currently, I am using WeasyPrint to generate a document and facing an issue with long sections that may span multiple pages. When a section breaks across pages, the name of the section does not display after the page break as intended. The following examp ...

pythonhtmlcssweasyprint

Storing a photo taken with a camera to a local directory on the computer

Currently, I am utilizing HTML5 inputs to capture a picture from the camera by using the code below: <input id="cameraInput" type="file" accept="image/*;capture=camera"></input> Subsequently, I am obtaining the image in blob format and manip ...

javascriptjqueryhtmlcamera

Flow of Logic using HTML5 WebWorkers

I've been working with this primary js file: var worker = new Worker("../Scripts/worker.js"); worker.onmessage = function (event) { alert("Worker said : " + event.data); }; worker.postMessage("Naruto"); worker.postMessage("Sakura"); The content ...

javascripthtmlweb-worker

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...

javascriptjqueryhtmlcss

The Bootstrap justify-content-around is causing the last item to be out of

My current prototype Website has this layout, utilizing justify-content-around: https://i.sstatic.net/WUJdl.jpg I am seeking a solution for when there is an odd number of cards, ensuring that the final card aligns with the rest. Is there a way to achieve ...

htmlcssbootstrap-4flexbox

What is the best way to show a <div> element when the ID is present in the URL?

I am in need of a solution to display specific content on the document based on the presence of a particular ID in the URL. In the current process, users go through a series of security checks and receive a cookie at the end to avoid repeating the check fo ...

javascriptphphtml

Is there a way to eliminate these HTML tags from my React application?

<figure class="image"><img scr="https://res.cloudinary.com/dfyhqttyxe/image/upload/v163126647133/zenith/uozgem6icqsrt3bitab6.jpg"></figure><p>The body</p> Within my ReactJS project, I am utilizing an edito ...

javascripthtmlreactjs

text/x-handlebars always missing in action

I'm currently working on my first app and I'm facing an issue with displaying handlebars scripts in the browser. Below is the HTML code: <!doctype html> <html> <head> <title>Random Presents</title> ...

javascripthtmlember.jshandlebars.js

How can one effectively pass arguments to jQuery in order to set the tooltip text for Bootstrap from an element within the HTML body

I'm working with a simple markup that triggers a colorful bootstrap tooltip when hovering over a button in the body. Currently, the tooltip text is hardcoded into the jQuery function. I want to find a way to pass the tooltip text to the jQuery functio ...

jqueryhtmlcsstwitter-bootstrap