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

Question

我有这种情况。我正在使用导航栏包装器，单击该包装器时会在整个页面上拉出覆盖。 为此，覆盖所经过的所有元素都是兄弟元素。其中一个兄弟姐妹是页眉、正文、页脚...... 我需要将导航栏绝对定位在 Header 元素的顶部，这样它就不会超出 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 内部看起来像这样。正如您在控制台中看到的，ui menu 是导航栏，container__header 是封面图片。他们都是兄弟姐妹。我需要将 ui menu 相对于 container__header 定位，例如放在中间，但是如果我放例如 bottom: 0，它一定不能超出 container__header。

Answer 1

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

Answer 2

在页面完全加载后使用 JQuery 获取同级元素的位置，然后使用 jquery 将元素的 CSS 设置为它需要的确切位置。 - 另一个技巧是在您的浏览器中打开开发人员工具并查找 CSS 部分，并将其更改为每个可能的位置选项，看看它们中的任何一个或 CSS 属性的组合是否适合您。在 FireFox 中非常简单。