Dealing With Disappearing “Position: Fixed” On Overflow?
Tags: css, overflow, fixed
Published: 2019-08-22 15:49:16

---
title: Dealing With Disappearing “Position: Fixed” On Overflow?
published: true
tags: css, overflow, fixed
canonical_url: https://stephencharlesweiss.com//2019-08-21/overflow-and-absolute-position/
---

Have you ever tried to have an element overflow when one of its children is in a fixed positioned relative to it?

Fun fact: It doesn’t work. The fixed element is hidden. Not in an “off the screen” way. Not in an underneath another element way. It’s just hidden or “cut” as it was described on StackOverflow. <sup>1</sup>

The only thing to do is to reorient the elements so that the element that _was_ the relatively positioned parent is now a sibling — which mostly defeats the purpose.

![Disappearing Button On Overflow](https://media.giphy.com/media/IeFqUB7QcCHEQFHVKE/giphy.gif)

This was the problem I was facing with a Modal element I was working on. I wanted a Modal that’s body was too long for the screen to scroll internally but still have a Close Icon in the top right that a user could hit to close the window.

The original Modal Dialog (the part of the Modal that has content - as opposed to the “mask” which covers the original document) looked something like this:

```javascript
<ModalStyled {...props}>
  {onClose && <CloseButton onClick={onClose}>X</CloseButton>}
  {children}
</ModalStyled>
```

The `ModalStyled` was just a styled `div`, but the key was that it has `position: relative`.

This meant that the button could be something like (using `styled-components`):

```javascript
import styled from ‘styled-components’
export const CloseButton = styled.button`
  position: absolute;
  top: -18px;
  right: -24px;
`;
```

If you look at the .gif, however, you’ll notice that when the `ModalStyled` is made `overflow:auto`, the button disappears!

The best solution I could come up with was to wrap the whole thing in a div and use flex box to orient it so that my `CloseButton` would still appear _above_ the Modal, if not slightly off to the top right corner as initially.

```javascript
<Wrapper>
  <MiniWrapper>
    {onClose && <InternalScrollCloseButton name={closeIcon} onClick={onClose} />}
  </MiniWrapper>
  <ModalStyled {...props}>
    {children}
  </ModalStyled>
</Wrapper

Import styled from ‘styled-components’;

export const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  max-height: 100%;
  margin: auto;
  overflow: auto;
`;

Export const MiniWrapper = styled.div`
  display: flex;
  Justify-content: flex-end;
`;
```

Once I had this - I could flip between the two using a prop, `internalScroll`.

It basically turned into:

```javascript
export const Dialog = props => {

const { internalScroll, …rest } = props;

return ( internalScroll
  ? (
    <Wrapper>
      <MiniWrapper>
        {onClose && <InternalScrollCloseButton name={closeIcon} onClick={onClose} />}
      </MiniWrapper>
      <ModalStyled {...props}>
        {children}
      </ModalStyled>
    </Wrapper)
  : (
    <ModalStyled {...props}>
      {onClose && <CloseButton onClick={onClose}>X</CloseButton>}
      {children}
    </ModalStyled>)
)};
```

Is it perfect? Hardly. Does it work and get me most of the way there without a significant amount of additional effort? Barring a generous internet soul divining the answer to me … absolutely.

![Modal With Internal Scroll](https://media.giphy.com/media/mCav2dQLzz8izi3jrZ/giphy.gif)

P.S. I told a friend I’d made a Modal that had an internal scroll. His response? “Wince. Maybe that shouldn’t be a modal then?” Touché. None-the-less, this was my first blush with an interesting quirk of fixed position elements and overflow and I’ll never apologize for an opportunity to learn.

# <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Footnotes

- <sup>1</sup> [css - Absolute positioned div with overflow auto causing child absolute div to be cut off | Stack Overflow](https://stackoverflow.com/questions/7590772/absolute-positioned-div-with-overflow-auto-causing-child-absolute-div-to-be-cut)