Position elements inside child of "display: flex"

Question

I had a webpage that I split into sections, each section with it's own content. Unfortunately i needed it to be responsive, so i gave the body element a display: flex style. sect-1 and sect-2 were children of the body, so they are stacking, as expected. The issue is the content inside the flex items was being positioned absolutely, however now it is no longer being positioned from the sect-1 and sect-2, and now the whole page. Why does absolute positioning ignore flex item parents, and what can i do to position the children of the flex objects?

The HTML :

<body>
    <div id="sect-1">
        <h2 id="quote">I AM A WEB DESIGNER_</h2>
    </div>
</body>

The container css :

 body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

The first flex object :

#sect-1 {
    background: none;
    width: 100vw;
    height: 100vh;
    left: 0vw;
    z-index: 98;
}

And the object I need positioning inside the flex object (not container) :

#quote {
    align-content: left;
    font-family: Courier New;
    color: black;
    font-size: 25px;
    letter-spacing: 5px;
    line-height: 0px;
    width: 500px;
    position: absolute;
    top: calc(50vh - 12.5px);
    left: calc(50vw - 190px);
}

Flexbox cannot just *change* the `position` property. I would suggest that there is something you haven't shown us in your code...when you show us that... — Paulie_D, Aug 23 '17 at 14:00
Its really quite simple. I'll edit my question. Its not that I expect it to change the position, I need to position elements inside a flex object (not the container) — Josh Lyness, Aug 23 '17 at 14:03
Flex items will not position absolutely unless you tell them too...not that I think it's a good idea..but it will depend on what it is you are trying to do. — Paulie_D, Aug 23 '17 at 14:05
CSS alone **is not sufficient** as it does not demonstrate the problem. Centering is easy with flexbox without positioning being required. — Paulie_D, Aug 23 '17 at 14:06
No no no, its not the flex items, its their children. The flex items are set to 100vh, 100vw, however I need their children to be positioned inside the flex item. Since when is the css not sufficient? Ill add the html but its not a mistake in that, theyre just children of each other. — Josh Lyness, Aug 23 '17 at 14:07
There's no reason to use absilute positioning to center items. Flexbox i perfectly capable without that - https://codepen.io/Paulie-D/pen/VzdybZ — Paulie_D, Aug 23 '17 at 14:20
@Paulie_D thats great, but if I have another item in there that I want left aligned I cant do that. I think ill scrap flexbox, it wasnt designed for whole page layouts, and has some serious limitations. Ill just use it for galleries and blogs as it was intended for ahah — Josh Lyness, Aug 23 '17 at 14:36
***"Why does absolute positioning ignore flex item parents?"*** Se [**here**](https://stackoverflow.com/q/32991051/3597276) and [**here**](https://stackoverflow.com/q/41007243/3597276). — Michael Benjamin, Aug 23 '17 at 14:37
Ahh...but that's not what you originally asked. Did you forget to use `position:relative` on the flex-parent to provide positioning context? — Paulie_D, Aug 23 '17 at 14:39
@Michael_B no, again, its not the children of the flex container that need to be absolutely positioned as it is in the questions you linked, its the children of the children of the flex container — Josh Lyness, Aug 23 '17 at 14:44
@Paulie_D I don't think i worded my question properly, it's difficult because there's no real terminology for the children of the flex container. What i'm asking for is a way to position items within the child of the flex container. Currently, if I set an element within the child of the flex container to have absolute positioning, instead of being offset from the child of the flex container, it ignores all other elements and orients itself from the flex container. It's almost as if setting absolute positioning on a child of a child of a flex container puts it out of flow. — Josh Lyness, Aug 23 '17 at 14:47
"Flex item parents" can mean the parent of the flex items, which would be the container. But you're right. It can also mean parents that are flex items. My bad. — Michael Benjamin, Aug 23 '17 at 14:49
*setting absolute positioning on a child of a child of a flex container puts it out of flow* - that's **precisely what it's meant to do** It has nothing to do with flexbox at all. A child of a flex parent is a flex item....perhaps you need to nest your flexboxes. — Paulie_D, Aug 23 '17 at 14:49
@Michael_B yeah questions related to flex containers sound more like tongue twisters — Josh Lyness, Aug 23 '17 at 14:53
@Paulie_D what you said about setting it to position: relative I didnt understand what you meant, but after reading someones answer, you were correct, it's because absolute positioning uses the next parent that isn't static. — Josh Lyness, Aug 23 '17 at 14:54

score 1 · Accepted Answer · answered Aug 23 '17 at 14:51

For the quote to position itself inside the flex item sect-1, the sect-1 need to have a position other than static, normally relative is what one use.

body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

#sect-1 {
    position: relative;       /*  added  */
    background: none;
    width: 100vw;
    height: 100vh;
    left: 0vw;
    z-index: 98;
}

#quote {
    align-content: left;
    font-family: Courier New;
    color: black;
    font-size: 25px;
    letter-spacing: 5px;
    line-height: 0px;
    width: 500px;
    position: absolute;
    top: calc(50vh - 12.5px);
    left: calc(50vw - 190px);
}

<body>
    <div id="sect-1">
        <h2 id="quote">I AM A WEB DESIGNER_</h2>
    </div>
</body>

Yeah wow, I forgot I removed the position: absolute from the child of the flex container, so absolute positioning was using the next non-static parent. Thanks — Josh Lyness, Aug 23 '17 at 14:52

Position elements inside child of "display: flex"

1 Answers1