粘贴式导航将页面内容推向右侧,而不是“粘贴”到页面顶部(但子元素可以)

问题描述 投票:1回答:1

[我正在使用以下内容尝试创建一个包含几个不同元素的粘性导航栏(左侧为图片,右侧为选择下拉列表)。

[sticky: top似乎没有按照我的预期工作,只有子<div>元素停留在页面顶部。

也是导航栏下面的内容。被推到窗口的右侧,而不是在下方流动。我包括了顶层的弹性布局,以防引起问题:

.header {position: sticky; top: 0; z-index: 100; margin: 0px; padding: 0px; height:50px;}
.logo-container {background-color: #09f; padding: 10px; width: 200px; height:50px; float: left;}
.select-container {background-color: 181818; padding: 10px; margin-left: 300px; width: 300px; height: 50px; float: left;}
.select {padding: 10px; height: 50px; width: 250px; font-size: 16px; background-color: #f2f2f2; font-color: white;}
.flex-container {display: flex; flex-wrap: wrap; background-color: #f2f2f2; padding-top:20px;}
.flex-item {margin: 20px; padding: 10px; box-shadow: 0 4px 6px rgba(51,51,51,.11), 0 1px 3px rgba(51,51,51,.08); background-color: white; border-radius: 5px;}
<body>

<div class="header">

<div class="logo-container"><img style="width: 200px;" src="https://placehold.it/200x50"></img></div>

<div class="select-container">

<select class="select" id="select" name="monthyear">
    <option value="01%22%7D" selected="selected">
        January 2019
    </option>
    <option value="02%22%7D">
        February 2019
    </option>
    <option value="03%22%7D">
        March 2019
    </option>
    <option value="04%22%7D">
        April 2019
    </option>
    <option value="05%22%7D">
        May 2019
    </option>
    <option value="06%22%7D">
        June 2019
    </option>
    <option value="07%22%7D">
        July 2019
    </option>
    <option value="08%22%7D">
        August 2019
    </option>
    <option value="09%22%7D">
        September 2019
    </option>
    <option value="10%22%7D">
        October 2019
    </option>
</select>

</div>

</div>

<div class="flex-container">

<div class="flex-item">

<h2>Title</h2><p>Subtitle</p>

</div>

</body>

。header应该是页面顶部的粘性元素,包含并排元素(.logo-container和.select-container)。

下面应该是具有.flex容器和许多.flex项的页面布局。

html css nav sticky
1个回答
0
投票

不幸的是,我缺乏留下评论的名声,因此这里有一些指针:如果我将(出于调试目的)添加到标头类中

background-color: red;

它似乎工作正常,它停留在顶部。我在flex容器中增加了一些高度,以通过滚动来确保高度。向flex容器添加宽度也可以正确定位它,我可以做到

position: relative

也是。而且您忘记为flex添加一个结束div标签。但是,您应该提供有关要获取的布局类型以及所遇到的问题的更多详细信息。

© www.soinside.com 2019 - 2024. All rights reserved.