Can one flex container(A) be positioned absolutely in front or behind of another flex container(B) and still maintain flex properties of its children?
My problem: When I assign a flex-container(B) to position:absolute, the children content inside lose the automatic flex properties. When I switch back to position:relative, flex works again. When container(B) is relative, I can't overlay on top of the other flex container(A) like I need.
Research: Found everything on absolute positioning of children in parent flex containers (W3C and CSS tricks, etc), but nothing specific enough to flex containers being moved absolutely over another flex container (which makes me wonder if it's even possible!). If so, I'll be rollin' in joy.
Ultimate Goal: Want to overlay one adjacent flex container over another with different z-indexes.
Thanks in advance.
As we don't know how your original code looks like, here is a general layout with one flex container being absolute positioned on top of another.
To make the position: absolute element align as its sibling, I wrapped them both and gave the second width: 100%
.wrap {
position: relative;
}
.a, .b {
display: flex;
height: 120px;
left: 0;
top: 0;
}
.a {
background: red;
}
.b {
position: absolute;
top: 50px;
height: 50px;
width: 100%;
background: blue;
}
.wrap > div > div {
flex: 1;
padding: 20px 50px;
margin: 5px;
background: green;
}
.wrap div div:first-child {
flex-basis: 50%;
}
<div class="wrap">
<div class="a">
<div></div>
<div></div>
<div></div>
</div>
<div class="b">
<div></div>
<div></div>
<div></div>
</div>
</div>
Related
Given an outermost "containing" div of arbitrary dimensions, I am looking for markup and css that will place two divs within it, and display them left to right, as follows. The first div, on the left, should have a fixed width of 200 pixels. It should take up 100% of the height of its parent. The second div, on the right, should take up the remaining width of the parent and also 100% of its height.
So, given the following HTML for a parent container along with the two children:
<div class="a">
<div class="b">
</div>
<div class="c">
</div>
</div>
And given this CSS for the parent:
.a {
height: 300px;
width: 600px;
background-color: gray;
}
And given this incomplete CSS for the children:
.b {
background-color: red;
}
.c {
background-color: green;
}
How can I complete the CSS for the children, in a way that does not depend on the exact height and width of the parent?
(It would also be permissible to add another element ".d" as the parent of the two children, for example as a flex container, giving the following HTML:
<div class="a">
<div class="d">
<div class="b">
</div>
<div class="c">
</div>
</div>
</div>
The point is that I cannot modify the outermost element, but I can accomplish my goals with any combination of elements and css beneath it.
)
display: flex was designed for this type of set up.
My personal favourite post, when I need to brush up on the settings, is CSS-Tricks': "A complete guide to Flexbox"
.a {
display: flex; /* turn element into a flex container, and all its children into flex elements */
flex-direction: row; /* render the flexbox horizontally */
height: 300px;
width: 600px;
background-color: gray;
}
.b {
width: 200px; /* Element will be exactly 200px wide */
background-color: red;
}
.c {
flex-grow: 1; /* This (flex) element will take all available space */
background-color: green;
}
<div class="a">
<div class="b">
</div>
<div class="c">
</div>
</div>
This is how I do it: with relative positioning.
.b {
background-color: red;
position: relative;
left: 0px;
top: 0px;
width: 100px;
height: 300px;
}
.c {
background-color: green;
position: relative;
left: 100px;
top: -300px;
height: 300px;
}
Basically, relative positioning moves the boxes relative to where they would have been under normal positioning.
Eg. how can you get the blue child in this example to be horizontally centered relative to the viewport (ie. in the center of the page), provided that the parent must stay the same.
Other qualifications:
I don't want it to be fixed.
Suppose that distance between the parent and the left viewport is unknown.
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: absolute;
bottom: 100%;
}
<div class="parent">
<div class="child">
child
</div>
</div>
I am trying to make this question a SSCCE. In reality, the use case is that I have a dropup (like dropdown, expect it appears above rather than below the triggering button). I want the dropup menu to be centered.
The menu needs to be absolutely positioned, otherwise it'd get in the way of the flow of other DOM elements. And I need to position the container so that I could set bottom: 100%; on the menu so that it appears right above the triggering button.
In in this case you can use position:fixed BUT to avoid it being fixed apply a null transform to the body:
body {
transform:translate(0,0);
min-height:150vh;
}
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: fixed;
left:50%;
transform:translate(-50%,-100%);
}
<div class="parent">
<div class="child">
child
</div>
</div>
I want to make a div stick on the top of the screen without any influence to other elements, and its child element in the center.
.parent {
display: flex;
justify-content: center;
position: absolute;
}
<div class="parent">
<div class="child">text</div>
</div>
When I add the position: absolute line, justify-content: center becomes invalid. Do they conflict with each other and, what's the solution?
EDIT
Thanks guys it's the problem of parent width. But I'm in React Native, so I can't set width: 100%. Tried flex: 1 and align-self: stretch, both not working. I ended up using Dimensions to get the full width of the window and it worked.
EDIT
As of newer version of React Native (I'm with 0.49), it accepts width: 100%.
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 (like display: 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.
you have forgotten width of parent
.parent {
display: flex;
justify-content: center;
position: absolute;
width:100%
}
<div class="parent">
<div class="child">text</div>
</div>
You have to give width:100% to parent to center the text.
.parent {
display: flex;
justify-content: center;
position: absolute;
width:100%
}
<div class="parent">
<div class="child">text</div>
</div>
If you also need to centre align vertically, give height:100% and align-itens: center
.parent {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width:100%;
height: 100%;
}
In my case, the issue was that I had another element in the center of the div with a conflicting z-index.
.wrapper {
color: white;
width: 320px;
position: relative;
border: 1px dashed gray;
height: 40px
}
.parent {
position: absolute;
display: flex;
justify-content: center;
top: 20px;
left: 0;
right: 0;
/* This z-index override is needed to display on top of the other
div. Or, just swap the order of the HTML tags. */
z-index: 1;
}
.child {
background: green;
}
.conflicting {
position: absolute;
left: 120px;
height: 40px;
background: red;
margin: 0 auto;
}
<div class="wrapper">
<div class="parent">
<div class="child">
Centered
</div>
</div>
<div class="conflicting">
Conflicting
</div>
</div>
Here's what I am trying to accomplish...
"parent" has position:relative
"div 1-3" have position:absolute
However, whenever I do this, I find myself having to assign specific "top" values in my CSS. So div 1 might be top:50px, div 2 would be top:150px, and div 3 would be top:225px;
Is there a way to make sure the divs continue to stack inside the parent without assigning top values and/or absolute positioning?
A div should already display as a block and take up a full "row". Here is some HTML and CSS to give an example, compare it to your code:
http://jsfiddle.net/mWcWV/
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
<div class="child">Baz</div>
</div>
Should be straight:
HTML:
<div class="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
CSS:
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #ffbf00;
}
.red {
background-color: #f00;
width: 200px;
height: 150px;
margin: 5px auto;
}
.blue {
background-color: #0f0;
width: 200px;
height: 150px;
margin: 5px auto;
}
.green {
background-color: #00f;
width: 200px;
height: 150px;
margin: 5px auto;
}
Check this fiddle.
In css file use...
div
{
display : block;
}
Which will give a break line for each div block and that feature is by default and don't use relative - absolute technique.
Div elements are block elements, which means that they will take a full row and that any element next to them will skip a line.
Just do:
<div></div>
<div></div>
<div></div>
If that does not work, you probably need to put them in display: inline-block;
Just remove absolute positioning. Center the divs using margin:auto and then provide whatever vertical margins you like.
You can give margin to inner div.
I want the top lines of two DIVs (<div></div>) to be aligned horizontally, how to do it?
Steven,
In addition to T. Stone's suggestion to float both divs, a simple way to align two divs is to make both have the display: inline-block; CSS rule and give the lower div the vertical-align: top; CSS rule.
Take a look at this simple jsFiddle example to see how this works.
div {
display: inline-block;
}
div#tall {
height: 4em;
}
div#short {
height: 2em;
vertical-align: top;
}
In response to "is there another way to do it", sure you could use display: inline but you have a bunch of hacks to remember to get it to work in IE6/7. This way is generally better (but it all comes down to the individual circumstances)
<style type="text/css">
.keeper {
overflow: hidden; /* expand to contain floated children */
}
.keeper div {
width: 200px;
height: 30px;
float: left;
border-top: 1px solid red; /* so you can see the 'tops' */
}
</style>
<div class="keeper">
<div>
</div>
<div>
</div>
</div>
Float them in a container.
.parent div { float: left; width: 50%; }
<div class="parent">
<div>1</div>
<div>2</div>
</div>
Note: The sum of the width of the child divs can not be greater than 100% of the parent div, including margin and padding.
Alternative
If maintaining flow with the page isn't a requirement, and all that really matters is aligning, them, the divs can always be positioned absolutely.
.abs { position: absolute; top: 100px; width: 50px; }
.left { left: 0px; }
.right { left: 50px; }
<div class="abs left">1</div>
<div class="abs right">2</div>