个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:45:26 25 4
gpt4 key购买 nike

我正在使用 React 创建 Instagram 克隆，但现在在设置标题栏时遇到了问题。我将它设置为 position: fixed;这样它就可以水平放置在顶部，但现在我的图片库直接位于它的后面，与标题栏重叠。我试过添加 padding-top body和 .gallery (分别)但这只是将所有内容向下移动(仍然重叠)无论我设置多少。添加margin-bottom也一样到 .space分区我希望我的图片库位于标题栏下方。我的app.js插入自己的 <div>在<body>里面由 ReactDOM.render() 标记.这是我的 JSX:

app.js

 return (
  <main>
    <div className="bar">
      <div>
        <h1 className="title">boy walks dog</h1>
      </div>
    </div>

    <div className="gallery">
      {mappedImageCollection}
    </div>

    <div>
      {overlay}
    </div>
  </main>
 )

这是我的 CSS:

   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;
    }

最佳答案

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

或

试试这个

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

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

然后在你的CSS中

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

关于html - 内容位于固定顶部导航栏下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46945130/

25 4 0
文章推荐： html - Rails 复选框和标签在同一行
文章推荐： javascript - highcharts 定位器工具提示 - 一般 javascript
文章推荐： javascript - 使用附加 SDK 的 Firefox 扩展中的 Web Worker 中的 FileReaderSync 未定义
文章推荐： javascript - 通过 Javascript 在 Windows Metro 应用程序中打开 url