What is the best way to place a div absolutely in a flex box without affecting the positions of its neighboring elements?

I have an element with the #text inside a flex container and I want to position something absolutely beneath it:

How can I ensure that it does not affect the positioning of its siblings in the flex layout?

#container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}

It seems that the #text is slightly off-center within its parent, and I would like it to be perfectly vertically centered without modifying:

  • The node tree.

  • The already defined flex properties (like justify-content).

Edit :

I came across another question related to this issue, but the suggested solution did not work for me. Check it out here: Absolute positioned item in a flex container still gets considered as item in IE & Firefox

It appears to be a bug specific to Firefox and IE. (I am currently using Firefox 47, where the issue persists, whereas it works fine on Chromium.)

Final Edit :

After further research, I found several similar questions:

  • Absolute positioning interfering with flexbox positioning in Firefox

  • Absolutely positioned flex item not being removed from normal flow in Firefox

  • Flexbox in Firefox: Items are not lined up properly

  • Answer by @Oriol Exclude element with fixed positioning from justify-content in flex layout

For more information, visit Bugzilla.

htmlcssflexboxcss-position

Answer №1

It seems that some browsers include absolutely-positioned flex items in justify-content calculations, even though they are supposed to be removed from the normal flow.

According to the spec:

4.1. Absolutely-Positioned Flex Children

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

In Firefox and IE11, however, absolutely-positioned flex items behave like regular siblings when it comes to alignment with justify-content.

For example, you can see the difference between browser behaviors in this code snippet. It works in Chrome, Safari, and Edge, but fails in Firefox and IE11.

flex-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: skyblue;
  height: 100px;
}
flex-item {
  background: lightgreen;
  width: 100px;
}
[abspos] {
  position: absolute;
  z-index: -1;
}
<flex-container>
  <flex-item>item 1</flex-item>
  <flex-item>item 2</flex-item>
  <flex-item abspos>item 3</flex-item>
</flex-container>

Here is the jsFiddle version

Despite the workarounds mentioned in other answers, here's an alternative solution if you might be dealing with an XY problem.

If your goal is to bottom-align one flex item while keeping another item vertically centered within the container, you don't necessarily need absolute positioning.

You can achieve this by using an invisible pseudo-element as a third flex item. This additional item will balance the bottom-aligned element and maintain the centering of the middle item.

For more information, check out these resources:

  • Center and bottom-align flex items
  • Methods for Aligning Flex Items (see boxes 62 & 66)

Answer №2

#container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}
<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

Update the value of justify-content to center. Hopefully it should work fine now.

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

Enhancing text display and spacing in Safari versions 5 to 6, as well as Chrome

After creating an introductory animation using jquery, I noticed that it displays correctly on my machine in Firefox, Chrome, and Safari. However, when viewing it on the client's devices, the animation is not working properly. The client provided a s ...

htmlcsssafaritext-rendering

Tips on setting background color for ODD and EVEN rows using PHP?

I am looking to incorporate background colors for alternating rows, with odd rows being #e5e8e8 and even rows being #b9b8bb, using CSS. for ($i = 2; $i <= $arrayCount; $i++) { $_SESSION["a"] = trim($allDataInSheet[$i]["A"]); $_SESSION[ ...

cssstyles

Clickable table cell with interactive space extending below the text

This adaptation was inspired by the response of James Donnelly to a query about how to create a clickable link in a TD element. While his solution is effective in many cases, I encountered a scenario where it falls short. To illustrate this issue, here is ...

htmlcss

Having trouble opening a local file through a link on a local webpage

I'm encountering an issue with linking to a file on the network through a local webpage. I created a basic HTML page with a hyperlink: <a href="h:\myfiles\dir#1\file1.s">View File</a> When I click on the link, I receive an ...

htmlhyperlinkspecial-characterslocal

I'm currently facing difficulties trying to implement AJAX with JavaScript and PHP as the desired output is not being

My query is quite straightforward - why isn't the code functioning properly? I am attempting to have the text echoed in PHP displayed inside a div with the ID of "show". Interestingly, this works with a txt file but not with PHP or any other type of f ...

javascriptpythonphphtmlajax

The CSS code isn't functioning properly on both desktop and mobile views

Here is what I desire to achieve: https://i.sstatic.net/8H4fv.png The CSS code I have is: And the HTML code looks like this: <body> <div class="contanier"> <div id="rightcol">Right Section</div> <div id="content">Cont ...

htmlcssiphone

Tips for positioning the bootstrap navbar correctly inside a container

I am having some trouble with my HTML page layout. I have a fixed Bootstrap navbar and a container with a width of 1000px. I'm trying to place the navbar inside the container, but it's not working as expected. The navbar is still taking up the fu ...

htmlbootstrap-4

Shifting the form to the bottom right corner

Just starting out with HTML5 and CSS, I've been experimenting with different elements. One project I've been working on is a form: <div id="form1"> <form action="demo_form.asp" autocomplete="on" > Departure City & ...

csshtml

Getting the submit button to be positioned above the open keyboard in React Native

On one screen, we have two View components within another View. I styled it so that the button is at the bottom. When we click on the input text, the keyboard opens up and the screen adjusts to show the input text properly. However, the submit button rem ...

cssreactjsreact-native

What is the reason for the jquery change event failing to fire when the select value is modified using val()?

I'm experiencing a peculiar issue where the logic inside the change() event handler is not triggering when the value is set using val(), but it does work when the user manually selects a value with their mouse. Any idea why this might be happening? & ...

jqueryhtmlselectinput

How can I retrieve text within a p tag using xpath and xpath axes?

<div class="details"> <p><b>Compatibility:</b> All versions</p> <p><b>Category:</b> Entertainment</p> <p><b>Updated:</b> Apr 2, 2014</p> <p><b>Version ...

htmlxpath

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

Tips for updating the selected value in Vue dynamically

I am currently working on a feature where the months change dynamically based on the selection made using Vue. You can view the code snippet in the link provided below. <div id="app"> <span class="selectboxWrap"> < ...

htmlvue.js

Is there a way to align an element to the right of a centered element?

I am trying to center two inputs ("email" and "password") horizontally on the page. However, I also want to add another item to the right of them while keeping the inputs centered. <div style={{ display: "flex", justifyContent: "center" }}> < ...

cssbootstrap-4

Guide on updating a table with query parameters in Html Agility Pack using C#

Struggling with parsing this URL using the Html Agility Pack: " The default table that shows up is always based on the closest contract date and the current date. I can parse the entire page without any issues, but when I try to request a different date ...

htmlhtml-parsinghtml-agility-pack

Scraping the Web: Analyzing the Stats of Understat's Best Perform

I've been attempting to collect data from the Understat website (). While I successfully managed to scrape data for top players, I encountered difficulties when trying to do the same for top teams' data. Can someone please assist me with this tas ...

pythonhtmlweb-scraping

Elusive Appearance of the Flask Flash Message

I have developed a web application using Flask that allows users to upload files to an S3 storage. However, I would like to enhance the user experience by showing them the progress of their file uploads in real-time. To achieve this, I am utilizing Flash t ...

pythonhtmlflaskamazon-s3flash-message

Is there a way to send emails with subject lines containing special characters?

I am facing an issue where, when I send an email with the subject containing "Ç", it displays as "?". I have tried various implementations to fix this such as using -charset="ascii", -charset=UTF-8, and modifying the subject line with different encodings. ...

phphtml

What is the most efficient method in Jquery to retrieve the contents of the third column in a row within an HTML table?

Recently, I encountered a situation where I needed to extract the first value from an HTML table using some code. var firstNameinFirstCol = $(this).parents('tr:first').find('td:first').text(); While this approach was successful, I now ...

jqueryhtmlhtml-table

html scroll to the flickering page

Why is it that when a user clicks on a link in the list, the browser flickers? This issue becomes especially noticeable if a user clicks on the same 'link' twice. Is there a solution to prevent this from occurring? The problem also seems to aris ...

javascriptjqueryhtmlcss