带 flexbox 的透明固定页眉

Question

我一直在尝试使用 flexbox 制作一个带有固定透明页眉的页面。起初，我发现这会以某种方式导致冲突（固定定位和 flex），并且 justify-content 或 align-items 属性不适用于包装器 flex-fixed 父元素的子元素。固定父元素的子元素不会 space 适当。

但后来我看到了这个 https://templated.co/industrious，不知何故它起作用了！所以我不明白为什么它不适用于我的代码。在我看来，我并没有做不同的事情。

header-fixed-flex div 包装了 LOGO、NAV 和搜索 (svg) 元素，但我无法使 justify-content 或 align-items 选项在 header-nav 和导航上起作用 div的。

    body {
        height: 2500px;
    }
    
    .header-fixed-flex {
        max-width: 150rem;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        transform: translate(19.2rem, 0);
    }
    
    .header_nav {
        max-width: 155rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .header_logo {
        max-height: 9.7rem;
        background: rgba(3, 12, 77, 0.4);
    }
    
    .header_link {
        padding: 0.5rem;
    }
    
    .navigation {
        background: rgba(191, 218, 218, 0.4);
        display: flex;
    }
    
    .navigation_list {
        list-style: none;
        letter-spacing: 0.4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        height: 100%;
    }
    
    .navigation_item:not(:last-child) {
        margin-right: 3rem;
    }
    
    .navigation_link:link, .navigation_link:visited {
        color: #fff;
        text-decoration: none;
        padding: 0.8rem;
    }
    
    .navigation_button {
        border: none;
        background: none;
        display: flex;
        align-items: center;
    }
    
    .navigation_search-input {
        border: none;
        background: rgba(255, 255, 255, 0.1);
        outline: none;
        width: 5rem;
    }
    
    .navigation_icon {
        padding: 0.5rem;
        width: 3rem;
        fill: #fff;
    }
    
    .hero_img {
        background: url(https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain@2x.jpg) top/cover;
        height: 100vh;
    }

    <div class="header-fixed-flex">
        
        <div class="header_nav">
            <header class="header_logo">
                <a href="index.html" class="header_link">LOGO</a>
            </header>
          
            <nav class="navigation">
                <ul class="navigation_list">
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Profile</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Services</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Articles</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Contact</a>
                    </li>
                </ul>
                <button class="navigation_button">
                    <input type="text" class="navigation_search-input" id="search-query"/>
                    <label for="search-query" class="navigation_search_label"></label>
                    <svg class="navigation_icon"></svg>
                </button>
            </nav>
        </div>
    </div>
    
    <section class="hero">
        <div class="hero_img"></div>
    </section>

或者带有 scss 的代码笔 link https://codepen.io/tantoniou/pen/QoGmba

Answer 1

在没有提供设计图或线框的情况下，很难确定你想要从你的文章中得到什么，但我最初的猜测是事情并没有像你预期的那样发生，因为 .header-fixed-flex 只有一个 child.因此，也许在 .header_nav 上设置 flex: 1 或仅设置 width: 100% 会让事情如您所愿。

Answer 2

删除 header-fixed-flex 元素并将此样式应用于 header_nav

width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 100;
display: flex;
justify-content: space-between;

带 flexbox 的透明固定页眉

Transparent fixed header with flexbox

html

css

fixed

flexbox