Absolutely position one element relative to its sibling element

Question

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.

Is it possible to absolutely position one element relative to its sibling element?

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.

Scenes

const Scenes = (props: Props) => (
  <NavigationWrapper routes={props.routes}>
    <Header />
    {renderRoutes(props.routes)}
  </NavigationWrapper>
)

NavigationWrapper

/* @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,
}) => (
  <Sidebar.Pushable>
    <Sidebar
      as={Menu}
      animation="overlay"
      icon="labeled"
      items={rightItems}
      vertical
      visible={visible}
    >
      <Menu.Item>
        <Image size="mini" src={logo} />
      </Menu.Item>
      <Menu.Menu>{rightItems.map(item => <Menu.Item as={NavLink} {...item} exact />)}</Menu.Menu>
    </Sidebar>
    <Sidebar.Pusher dimmed={visible} onClick={onPusherClick} style={{ minHeight: '100vh', }}>
      <Menu fixed="top" inverted>
        <Menu.Item onClick={onToggle} position="right">
          <Icon name="sidebar" />
        </Menu.Item>
      </Menu>
      {children}
    </Sidebar.Pusher>
  </Sidebar.Pushable>
)

const NavBarDesktop = ({ rightItems, }) => (
  <Menu>
    <Menu.Item>
      <Image size="mini" src={logo} />
    </Menu.Item>
    <Menu.Menu position="right">
      {rightItems.map(item => <Menu.Item as={NavLink} {...item} exact />)}
    </Menu.Menu>
  </Menu>
)

const NavBarChildren = ({ children, }) => children

type State = {
  visible: boolean,
}

type Props = {
  children: Object,
}

class NavigationWrapper extends Component<Props, State> {
  state = {
    visible: false,
  }

  handlePusher = () => {
    const { visible, } = this.state

    if (visible) this.setState({ visible: false, })
  }

  handleToggle = () => this.setState({ visible: !this.state.visible, })

  render(): Element<any> {
    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 (
      <Fragment>
        <Responsive {...Responsive.onlyMobile}>
          <NavBarMobile
            onPusherClick={this.handlePusher}
            onToggle={this.handleToggle}
            rightItems={rightItems}
            visible={visible}
          >
            <NavBarChildren>{children}</NavBarChildren>
          </NavBarMobile>
        </Responsive>
        <Responsive minWidth={Responsive.onlyTablet.minWidth}>
          <NavBarDesktop rightItems={rightItems} />
          <NavBarChildren>{children}</NavBarChildren>
        </Responsive>
      </Fragment>
    )
  }
}

export default NavigationWrapper

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, ui menu is navigation bar, container__header is cover image. They are all siblings. I need to position ui menu relative to container__header , for example put it in the middle, but if I put for example bottom: 0, it must not go out of container__header .

Answer 1

It's hard to understand your problem without the code. Please add the code you're using

Answer 2

Without seeing an example of your code, it's difficult to assist; however, it sounds like you want to use position: fixed as opposed to position: absolute .

Answer 3

Use JQuery to get the sibling-elements position after the page has completely loaded, then use jquery to set the CSS of your element to the exact position in which it needs to be. -another trick is to open Developer Tools in your browser and just look for the CSS section, and change it to each possible option for position and see if any of them or a combination of CSS attributes work for you. It's very easy in FireFox.