html - 相对于其兄弟元素绝对定位一个元素

Question

我有这种情况。我正在使用导航栏包装器，单击它会在整个页面上拉出一个覆盖层。为此，覆盖的所有元素都是兄弟元素。其中一个 sibling 是 Header、Body、Footer...我需要将导航栏绝对定位在 Header 元素之上，这样它就不会超出 Header 的边界。如果我将绝对位置放在导航栏上，它会相对于整个页面定位它，因为它上面没有相对位置的父元素。如果我将 position relative 放在 Header 上它没有帮助，因为它是导航栏的同级而不是父级。

是否可以相对于其兄弟元素绝对定位一个元素？

编辑:不知道有多少代码会有帮助，因为它是一个相当大的应用程序，我将问题简化为简单的术语。

场景

const Scenes = (props: Props) => (
  <NavigationWrapper routes={props.routes}>
    <Header />
    {renderRoutes(props.routes)}
  </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 内部看起来像这样。在控制台中可以看到，ui menu是导航栏，container__header是封面图。他们都是 sibling 。我需要相对于container__header定位ui menu，比如放在中间，但是如果我放比如bottom: 0，它一定不能超出>container__header.

Answer 1

如果没有看到您的代码示例，很难提供帮助；但是，听起来您想使用 position: fixed 而不是 position: absolute。