html - 如何将导航栏移动到 img 上?
问题描述
我需要将导航栏移动到图像上。我试图设置position: absolute;
导航栏,但它崩溃了。我怎样才能做到这一点?
* {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat", sans-serif;
}
.global-padding {
padding: 0 98px;
}
.container {
width: 1172px;
margin: 0 auto;
}
.order-us-button {
display: inline-block;
width: 212px;
height: 45px;
text-align: center;
text-decoration: none;
letter-spacing: 3.6px;
text-transform: uppercase;
color: #212121;
border-radius: 23px;
background-color: #ffffff;
box-shadow: 0 2px 5px 1px rgba(33, 33, 33, 0.35);
font-size: 18px;
font-weight: 700;
line-height: 45px;
}
.navbar {
display: flex;
padding-top: 63px;
flex-wrap: wrap;
justify-content: space-between;
}
.navbar_fixed {
/* pass */
}
.navbar__logo-img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
.navbar__menu {
display: flex;
list-style: none;
}
.navbar__menu-link {
padding: 10px 13px;
text-decoration: none;
text-transform: uppercase;
color: #8c8c8c;
font-size: 14px;
font-weight: 300;
}
.navbar__menu-link_active {
letter-spacing: 1.4px;
color: #212121;
border-bottom: 3px solid #212121;
font-weight: 700;
}
.navbar__search {
padding: 0;
border: none;
background: none;
}
.navbar__search-icon {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
.slider__background-image {
width: 100vw;
height: 100vh;
}
.slider__text {
position: absolute;
}
.slider__status-text {
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
font-weight: 700;
}
.status-text_trending {
color: #43a047;
}
.slider__h2 {
text-transform: uppercase;
color: #212121;
font-size: 62px;
font-weight: 100;
line-height: 72px;
}
.slider__content {
width: 450px;
color: #6c6c6c;
font-size: 14px;
font-weight: 300;
line-height: 24px;
}
.slider__circle {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #c7c7c7;
}
.slider__circle_active {
width: 40px;
height: 40px;
background-color: #212121;
}
<div class="slider">
<nav class="navbar global-padding">
<a href="#" class="navbar__logo-link">LOGO</a>
<ul class="navbar__menu">
<li class="navbar__menu-item"><a href="#" class="navbar__menu-link navbar__menu-link_active">HOME</a></li>
<li class="navbar__menu-item"><a href="#" class="navbar__menu-link">PRODUCTS</a></li>
<li class="navbar__menu-item"><a href="#" class="navbar__menu-link">HISTORY</a></li>
<li class="navbar__menu-item"><a href="#" class="navbar__menu-link">SHOWROOM</a></li>
<li class="navbar__menu-item"><a href="#" class="navbar__menu-link">CONTACT</a></li>
<button class="navbar__search"><img class="navbar__search-icon" src="{% static 'img/search.svg' %}" alt="Search"></button>
</ul>
</nav>
<img src="https://images.pexels.com/photos/1350789/pexels-photo-1350789.jpeg?cs=srgb&dl=two-assorted-color-padded-chairs-near-side-table-1350789.jpg&fm=jpg" alt="Slider image" class="slider__background-image">
</div>
解决方案
您应该设置img
为position: absolute
而不是navbar
. 请记住,您需要将img
的父容器设置为position: relative
.
编辑 1 -如果它阻止出现,您可能还需要设置z-index
。img
navbar
编辑 2 - 对于navbar
屏幕外问题-
- 用于元素
width: 100vw
_nav
- 在元素中设置
flex-grow: .5
和flex-basis: 50%
到ul
nav
注意-您可以根据需要调整数量flex-grow
和大小flex-basis
。
推荐阅读
- swift - 应用程序因更改音量而崩溃,状态 KVO 消息已收到但未针对 keypath “outputVolume”进行处理
- angular - 错误:没有用于具有未指定名称属性的表单控件的值访问器 - 角度反应式表单单元测试错误
- php - PHP PATCH 产品 PayPal 目录 API 格式错误的请求错误
- java - 反序列化文件以删除对象,然后再次进行序列化
- javascript - Reacr-Admin,OData:如何按嵌套数据过滤列表
- flutter - FutureBuilder 在通过 try/catch 收到失败后不更新
- laravel - 存储链接中的 Laravel 图像已损坏
- node.js - 如何存储承诺的结果并在范围之外访问它?
- pandas - Pandas - 在 Panda Dataframe 中更改多个标题的顺序
- sqlite - 触发器创建一个部分唯一的标识符