I am currently facing a situation where I have implemented a Navigation bar wrapper that reveals an overlay across the entire page when clicked. In order for this setup to function correctly, all the elements that the overlay covers must be sibling elements. These siblings include the Header, Body, Footer, and more. My challenge is to position the navigation bar absolutely on top of the Header element without exceeding the boundaries of the Header. When applying position:absolute to the Navigation bar, it positions itself relative to the whole page because there is no parent with position:relative above it. Similarly, adding position:relative to the Header does not work as it is a sibling rather than a parent of the Navigation bar.
Is it possible to absolutely position one element relative to its sibling element?
EDIT: Providing code snippets may not be very helpful due to the complexity of the application. I have simplified my question for better understanding.
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'
// NavBarMobile, NavBarDesktop components here...
class NavigationWrapper extends Component<Props, State> {
// Methods and properties here...
}
export default NavigationWrapper
In the structure inside the DOM, everything is encapsulated within the NavigationWrapper component. The ui menu represents the navigation bar while container__header indicates the cover image. These elements are all siblings. My goal is to position the ui menu relative to container__header, such as aligning it in the center. However, any positioning must ensure that it stays within the confines of container__header.