title: Absolutely position one element relative to its sibling element
body: <p>I have this kind of situation. I am using Navigation bar wrapper that when clicked pull out an overlay across whole page. 
  For this to work all the elements that overlay goes across are sibling elements. One of those siblings is Header, Body, Footer...
  I need to position navigation bar absolutely on top of Header element, so it doesn’t go out of boundaries of Header. If I put position absolute on Navigation bar it positions it relative to whole page since there is no parent element with position relative above it. If I put position relative on Header it doesn't help since it a sibling and not parent of Navigation bar. </p>
  
  <p>Is it possible to absolutely position one element relative to its sibling element?</p>
  
  <p>EDIT: Don't know how much code will help since it's a pretty big application and I bolied the question down to simple terms.</p>
  
  <p><strong>Scenes</strong></p>
  
  <pre><code>const Scenes = (props: Props) =&gt; (
    &lt;NavigationWrapper routes={props.routes}&gt;
      &lt;Header /&gt;
      {renderRoutes(props.routes)}
    &lt;/NavigationWrapper&gt;
  )
  </code></pre>
  
  <p><strong>NavigationWrapper</strong></p>
  
  <pre><code>/* @flow */
  
  import React, { Component, Fragment, } from 'react'
  import { NavLink, } from 'react-router-dom'
  import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon'
  import Image from 'semantic-ui-react/dist/commonjs/elements/Image/Image'
  import Menu from 'semantic-ui-react/dist/commonjs/collections/Menu/Menu'
  import Sidebar from 'semantic-ui-react/dist/commonjs/modules/Sidebar/Sidebar'
  import Responsive from 'semantic-ui-react/dist/commonjs/addons/Responsive/Responsive'
  // Flow
  import type { Element, } from 'react'
  
  import logo from '../../../assets/img/logo.png'
  
  import './navigationWrapper.local.scss'
  
  const NavBarMobile = ({
    children, onPusherClick, onToggle, rightItems, visible,
  }) =&gt; (
    &lt;Sidebar.Pushable&gt;
      &lt;Sidebar
        as={Menu}
        animation="overlay"
        icon="labeled"
        items={rightItems}
        vertical
        visible={visible}
      &gt;
        &lt;Menu.Item&gt;
          &lt;Image size="mini" src={logo} /&gt;
        &lt;/Menu.Item&gt;
        &lt;Menu.Menu&gt;{rightItems.map(item =&gt; &lt;Menu.Item as={NavLink} {...item} exact /&gt;)}&lt;/Menu.Menu&gt;
      &lt;/Sidebar&gt;
      &lt;Sidebar.Pusher dimmed={visible} onClick={onPusherClick} style={{ minHeight: '100vh', }}&gt;
        &lt;Menu fixed="top" inverted&gt;
          &lt;Menu.Item onClick={onToggle} position="right"&gt;
            &lt;Icon name="sidebar" /&gt;
          &lt;/Menu.Item&gt;
        &lt;/Menu&gt;
        {children}
      &lt;/Sidebar.Pusher&gt;
    &lt;/Sidebar.Pushable&gt;
  )
  
  const NavBarDesktop = ({ rightItems, }) =&gt; (
    &lt;Menu&gt;
      &lt;Menu.Item&gt;
        &lt;Image size="mini" src={logo} /&gt;
      &lt;/Menu.Item&gt;
      &lt;Menu.Menu position="right"&gt;
        {rightItems.map(item =&gt; &lt;Menu.Item as={NavLink} {...item} exact /&gt;)}
      &lt;/Menu.Menu&gt;
    &lt;/Menu&gt;
  )
  
  const NavBarChildren = ({ children, }) =&gt; children
  
  type State = {
    visible: boolean,
  }
  
  type Props = {
    children: Object,
  }
  
  class NavigationWrapper extends Component&lt;Props, State&gt; {
    state = {
      visible: false,
    }
  
    handlePusher = () =&gt; {
      const { visible, } = this.state
  
      if (visible) this.setState({ visible: false, })
    }
  
    handleToggle = () =&gt; this.setState({ visible: !this.state.visible, })
  
    render(): Element&lt;any&gt; {
      const rightItems = [
        {
          to: '/',
          content: 'Kuci',
          key: 'home',
        },
        {
          to: '/o-nama',
          content: 'O Nama',
          key: 'aboutus',
        },
        {
          to: '/usluge',
          content: 'Usluge',
          key: 'services',
        },
        {
          to: '/kontakti',
          content: 'Kontakti',
          key: 'contacts',
        },
      ]
  
      const { children, } = this.props
      const { visible, } = this.state
  
      return (
        &lt;Fragment&gt;
          &lt;Responsive {...Responsive.onlyMobile}&gt;
            &lt;NavBarMobile
              onPusherClick={this.handlePusher}
              onToggle={this.handleToggle}
              rightItems={rightItems}
              visible={visible}
            &gt;
              &lt;NavBarChildren&gt;{children}&lt;/NavBarChildren&gt;
            &lt;/NavBarMobile&gt;
          &lt;/Responsive&gt;
          &lt;Responsive minWidth={Responsive.onlyTablet.minWidth}&gt;
            &lt;NavBarDesktop rightItems={rightItems} /&gt;
            &lt;NavBarChildren&gt;{children}&lt;/NavBarChildren&gt;
          &lt;/Responsive&gt;
        &lt;/Fragment&gt;
      )
    }
  }
  
  export default NavigationWrapper
  </code></pre>
  
  <p>I am passing everything inside NavigationWrapper and render it as a children. It looks like this inside of DOM. As you can see in the console, <strong>ui menu</strong> is navigation bar, <strong>container__header</strong> is cover image. They are all siblings. I need to position <strong>ui menu</strong> relative to <strong>container__header</strong>, for example put it in the middle, but if I put for example bottom: 0, it must not go out of <strong>container__header</strong>.</p>
  
  <p><a href="https://i.stack.imgur.com/W21Gl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W21Gl.png" alt="enter image description here"></a></p>