Does 'position: absolute' conflict with Flexbox?
No, absolutely positioning does not conflict with flex containers. Making an element be a flex container only affects its inner layout model, that is, the way in which its contents are laid out. Positioning affects the element itself, and can alter its outer role for flow layout.
That means that
If you add absolute positioning to an element with
display: inline-flex
, it will become block-level (likedisplay: flex
), but will still generate a flex formatting context.If you add absolute positioning to an element with
display: flex
, it will be sized using the shrink-to-fit algorithm (typical of inline-level containers) instead of the fill-available one.
That said, absolutely positioning conflicts with flex children.
As it is out-of-flow, an absolutely-positioned child of a flex
container does not participate in flex layout.
Display: flex and Position: absolute conflict
Both vertical and horizontal alignment issues are resolved in Firefox. I've also applied a simple animation to make sure it's compatible with what you're trying to do (hover on header to transition the other items).
Link: http://codepen.io/anon/pen/YNXNLN
To fix the vertical center alignment on firefox, add this style (I mean merge, since you already use transform attribute):
a {
transform: translateY(-50%);
}
But then it will be positioned at the very top on Chrome, so you'll add this style to fix it:
a {
top: 50%;
}
Same will be done with horizontal alignment "left: 50%" and you already use translateX, so the value will be up to you.
Is there a way to fix this CSS Flexbox and position absolute bug?
Try to add position: relative;
to FilmCard
Flex display conflicts with absolute positioning
Changed the flex-grow
property to flex
and added the width
of 100%
to the div.IFlexible
:
* {margin: 0; padding: 0; box-sizing: border-box}html, body {width: 100%}
div { font-size: 5vw; font-family: Calibri, Helvetica, sans-serif;}
div.IFlexible { display: flex; width: 100%; /* added */}
div.yesno { position: absolute; bottom: 4vw;}
div > button { font-size: 5vw; flex: 1; /* modified */}
<div class="yesno IFlexible"> <button id="addNewOK" class="confirmBut">Confirm</button> <button id="addNewCancel" class="confirmBut">Cancel</button></div>
Trouble Using Flex Boxes with Absolute Positioning
By providing position: absolute
your div simply does not use the full width of its parent (in this case the window). You can specify width: 100%
or left: 0; right: 0;
to stretch it to the full width.
Absolute positioned item in a flex container still gets considered as item in IE & Firefox
It turns out that all it takes is three simple steps
(Demo)
1). Set the left and right margin to auto on each child
img {
margin-left: auto;
margin-right: auto;
}
2). Set the left margin on the first child to 0
img:nth-child(2) {
margin-left: 0;
}
3). Set the right margin on the last child to 0
img:last-child {
margin-right: 0;
}
If you miss any of these steps it will not work properly
This works in firefox and chrome, I haven't tested it in any other browsers.
EDIT:
Thanks to @Pontiacks
Apparently you can get away with adding margin-left: auto
to the img:nth-child(2)
updated jsfiddle
How can I have a position: fixed; behaviour for a flexbox sized element?
You can't.
As explained by the CSS2.1 spec:
Absolutely positioned boxes are taken out of the normal flow.
And the Flexible Box Layout spec confirms that:
An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.
(Emphasis mine)
Related Topics
How to Efficiently Load Google Fonts in Nuxt
Position Div to Bottom of Containing Div
Ml-Auto Is Not Pushing Navbar Links to the Right
Webkit Transform Blocking Link
Does a Background-Attachment of Fixed Work in iOS5
Using Static Files with the Django Virtual Server
How to Disable the Clear Button That Ie10 Inserts into Textboxes
Rotating Table Header Text with CSS Transforms
How to Override Global CSS in a CSS Module File
Chrome Issue with Background-Attachment Fixed and Position Fixed Elements
Implement a CSS-Only Slideshow/Carousel with Next and Previous Buttons
What Does This Symbol Mean in CSS
Creating a Droplet Like Border Effect in CSS
CSS Min-Height Not Working on Mozilla Firefox
Are "Top" and "To Top" the Same Direction for Linear Gradients