html - 带有弹性框的透明固定标题
问题描述
我一直在尝试使用 flexbox 制作具有固定透明标题的页面。起初,我发现这会以某种方式导致冲突(固定定位和 flex),并且 justify-content 或 align-items 属性不适用于包装器 flex-fixed 父级的子元素。固定父级的子元素不会适当地间隔。
但后来我看到了这个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 的 codepen 链接 https://codepen.io/tantoniou/pen/QoGmba
解决方案
删除 header-fixed-flex 元素并将此样式应用于 header_nav
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 100;
display: flex;
justify-content: space-between;
推荐阅读
- arrays - 在 Java 8 中生成随机短数组
- python - brew安装后python 3.7.7不会在mac上升级?
- unix - 没有临时文件的通讯
- git - 丢失了我在 github 上的所有提交历史记录 - 甚至 reflog 也无济于事
- sonarqube - SonarQube 不反映最新版本
- flutter - Dart / Flutter:我正在尝试将字符串转换为日期但遇到异常
- java - 由于这个问题,我是否必须更改我的 Web 应用程序结构?
- android - 如何在 Android Studio 中禁用这些弹出窗口?
- php - CodeIgniter - 为什么我不能从另一个控制器中的控制器访问会话集?
- vim - 如何强制重新加载 vimrc 文件