CODEWITHSUNDEEP
htmlcssflexbox
Tom
Tom

Reputation: 43

Confusion when combining flex and absolute positioning

I have an app that is essentially a header, main content, and a footer which is always visible. The footer can change size, and there are some tools I want to place on the main content panel above the footer. The main layout is done with flex, and my understanding reading the docs is that absolute positioning combines with flex layouts by positioning relative to the nearest descendant, but that doesn't appear to be my experience. Hoping someone can help me out here.

In the code example below, I am expecting to see the "bottom" div positioned above the footer, but it's actually at the bottom of the window. Here's the jsfiddle link: http://jsfiddle.net/L809zbey/

The HTML:

<div class="flex">
    <div class="header">Sweet header</div>
    <div class="content">Main content
        <div class="bottom">
          This guy should be fixed above the footer.
        </div>
    </div>

    <div class="footer">Equally sweet footer</div>
</div>

CSS:

.flex{
    border: 1px solid #ddd;
    font: 14px Arial;
    display: flex;
    flex-direction: column;
}

.header{
  background : #007AA2;
  flex: 0 0 auto;
}

.content{
  background : #FFF;
  flex: 1 1 auto;
  height: 200px;
}

.footer{
  background : #7FCADE;
  flex: 0 0 auto;
}

.bottom {
  position: absolute;
  bottom: 20px;
}

Upvotes: 4

Views: 1092

Answers (3)

Paulie_D
Paulie_D

Reputation: 115353

You don't need to position the element absolutely...just make sure it's always at the bottom of the .content div. In this way it will never overlay any actual content which it would do if it has absolute position.

You can achieve this by making the .content div a flex-column and applying margin-top:auto your tools div.

.flex {
  border: 1px solid #ddd;
  font: 14px Arial;
  display: flex;
  flex-direction: column;
}

.header {
  background: #007AA2;
  flex: 0 0 auto;
}

.content {
  background: pink;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.footer {
  background: #7FCADE;
  flex: 0 0 auto;
}

.bottom {
  margin-top: auto;
  background: orange;
}
<div class="flex">
  <div class="header">Sweet header</div>
  <div class="content">Main content
    <div class="bottom">
      This guy should be fixed above the footer.
    </div>
  </div>

  <div class="footer">Equally sweet footer</div>
</div>

Upvotes: 0

TaterOfTots
TaterOfTots

Reputation: 148

you'll want to add position: relative; to .flex. Things that are positioned absolutely will be positioned relative to the nearest positioned ancestor. If there are none it will be relative to the body

Upvotes: 1

jleggio
jleggio

Reputation: 1286

Try adding position:relative; to your .flex class. The .bottom element is currently relative to the body hence why it's stuck to the bottom of the page.

Upvotes: 5

Related Questions