html - 在响应式网站中与半透明 div 重叠

Question

我已经working on a self-project复制 reddit page for javascript使用可用的 JSON 数据。但是我无法在其 header 部分 中复制原始网站的行为，其中 header 是响应式的(屏幕尺寸减小时的行为)。

GIF : how the original website header section works .

问题:

1. 重叠右侧(登录页面选项)在左侧之上。重叠使得不显示文本后面。我已经设法实现了重叠，但是由于divs 的背景是半透明， 文字后面也显示。想不出任何解决方案。

GIF : my header (behind text seen)

1. 当空间不够时，导航栏元素 会向下移动。这不是原来的样子，它们被more 和Login 部分 隐藏了。我不知道如何将它放在单行中。

GIF : my header (header elements move down)

---

一个更小、相似的示例片段:

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
}
#top-right-div{
    position: absolute;
    right: 0;
    z-index: 1000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

如果您想查看 full project, the link on Github .

值得注意的一点:在页眉中，左侧的标题被右侧的部分重叠。因此，这是一个顺利的交易，当重叠时，即使部分文本在标题中也能看到。基本上，这不是让标题元素按宽度不可见的问题，因为那样会使整个 title 不可见。

例如:

• 标题有TODAYIL

• 标题有TODAYILEARNED(整个标题)

Answer 1

如果您能够使用 CSS flexbox ，我认为这个解决方案可以按照您想要的方式工作:

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
    display: flex;
}
#top-left-div {
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}
#top-right-div{
    flex: 0 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

我做了什么:

1. 制作.custom-top-header-container display:flex 确保左右并排显示。
2. 让 #top-right-div 只占用其内容所需的空间(即不扩大或缩小)
3. 让 #top-left-div 填充容器中剩余的任何空间，并使用 overflow:hidden 隐藏任何可能与 #top 重叠的内容-right-div 小宽度。
4. 将 #top-left-div 设置为 white-space: nowrap 以防止带空格的链接(如“My Subreddits”)在屏幕显示时分多行收缩得足够小。