透明固定头与flexbox

Question

我一直在尝试使用flexbox制作一个带有固定透明标题的页面。起初，我发现这会导致冲突（固定定位和弹性）以及justify-content或align-items属性不会对包装器flex-fixed父级的子元素起作用。固定父级的子元素将不适当地放置。

但后来我看到了这个https://templated.co/industrious，不知何故，它有效！所以我无法理解为什么它不适用于我的代码。在我看来，我的做法不同。

header-fixed-flex div包装了LOGO，NAV和search（svg）元素，但是我无法使justify-content或align-items选项适用于header-nav和navigation 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/[email protected]) 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 https://codepen.io/tantoniou/pen/QoGmba的codepen链接

Answer 1

在没有设计补偿或线框提供的情况下确定你想要的内容真的很难，但我最初的猜测是事情没有像你期望的那样发生，因为.header-fixed-flex只有一个孩子。所以也许在flex: 1上设置width: 100%或者只是.header_nav可以让你的工作随心所欲。

Answer 2

删除header-fixed-flex元素并在header_nav上应用此样式

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