Question

我有这种情况。我正在使用导航栏包装器，当单击时拉出整个页面的叠加层。为了实现这一点，所有叠加的元素都是兄弟元素。其中一个兄弟姐妹是Header，Body，Footer ...... 我需要将导航栏绝对放在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菜单是导航栏， container__header 是封面图片。他们都是兄弟姐妹。我需要相对于 container__header 定位 ui menu ，例如把它放在中间位置，但是如果我把底部：0放在底部，那么它一定不能走出 container__header

Answer 1

没有代码，很难理解你的问题。请添加您正在使用的代码

Answer 2

如果没有查看代码示例，则很难提供帮助;但是，听起来你想使用position: fixed而不是position: absolute。

Answer 3

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

绝对地将一个元素相对于其兄弟元素

3 个答案: