Question

我正在使用React创建Instagram克隆，现在我无法设置标题栏。我将它设置为position: fixed;，以便它可以水平坐在上面，但现在我的图片库直接位于它后面，与标题栏重叠。我已尝试将padding-top同时添加到body和.gallery（单独），但只是将所有内容向下移动（仍然重叠），无论我设置多少。将margin-bottom添加到.space div也是一样的。我想让我的图片库位于我的标题栏下方。我的app.js被<div>插入<body>标记内的ReactDOM.render()个return ( <main> <div className="bar"> <div> <h1 className="title">boy walks dog</h1> </div> </div> <div className="gallery"> {mappedImageCollection} </div> <div> {overlay} </div> </main> )。这是我的JSX：

app.js

   body {
    margin: 0px;
    padding: 0px;
    background-image: url('../img/pattern7.png');
   } 

   .gallery {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
     max-width: 80%;
     margin: auto;
    }

   .bar {
     position: fixed;
     background-color: #C26464;
     width: 100%;
     box-shadow: 0px 0px 5px 0px;
    }

这是我的CSS：

myinputs

Answer 1

只需给导航栏一个底部边距，指出你希望它间隔多少

或

试试这个

将这个添加到两个元素之间的html中

<div class="spacer">
</div>

然后在你的CSS中

.spacer{
    display: block;
    height: //how much space you want between the two elements 
    content: '';
}

内容位于固定的顶部导航栏下方

1 个答案: