我有这种情况。我正在使用导航栏包装器,单击它会在整个页面上拉出一个覆盖层。 为此,覆盖的所有元素都是兄弟元素。其中一个 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.
最佳答案
如果没有看到您的代码示例,很难提供帮助;但是,听起来您想使用 position: fixed
而不是 position: absolute
。
关于html - 相对于其兄弟元素绝对定位一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50467516/