Absolutely position one element relative to its sibling element - html

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

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 2

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.