У меня такая ситуация.Я использую оболочку панели навигации, которая при нажатии вытащит оверлей на всю страницу.Чтобы это работало, все элементы, через которые проходит оверлей, являются элементами одного уровня.Один из этих элементов - Header, Body, Footer ... Мне нужно расположить панель навигации абсолютно поверх элемента Header, чтобы она не выходила за границы Header.Если я помещаю абсолютную позицию на панель навигации, она позиционирует ее относительно всей страницы, так как нет родительского элемента с позицией относительно нее.Если я помещу положение относительно заголовка, это не поможет, так как это брат, а не родитель панели навигации.
Можно ли абсолютно позиционировать один элемент относительно его родственного элемента?
РЕДАКТИРОВАТЬ: Не знаю, сколько кода поможет, так как это довольно большое приложение, и я обдумал вопрос допростые термины.
Сцены
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
Я передаю все внутри NavigationWrapper и отрисовываю егокак дети.Похоже, это внутри DOM.Как видно из консоли, пользовательское меню - это панель навигации, container__header - изображение обложки.Все они братья и сестры.Мне нужно расположить пользовательское меню относительно container__header , например, поместить его посередине, но если я поставлю, например, bottom: 0, оно не должно выходить из container__header.
