css - 溢出：隐藏；和 z-index 不能隐藏它下面的元素？
问题描述
所以我在我的网页上制作了一个菜单部分。我有一条虚线，我想将我的菜单项连接到相应的价格。我正在使用每个菜单项父项的 :after 伪类来执行此操作。然而，当一切都对齐时，您可以看到菜单项和价格下方的虚线。我尝试使用标题中发布的方法，但没有？
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
window.sr = ScrollReveal();
sr.reveal('.info', {
duration: 2000,
origin: 'bottom'
})html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(img/mex-9.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
z-index: 10;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .15s;
z-index: 10;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*------ABOUT------*/
.about-section {
background-color: #17a832;
width: 100%;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-wrap {
display: flex;
padding-bottom: 150px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background-color: red;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg) scale(1.3);
}
#right:hover {
transform: rotate(90deg) scale(1.3);
}
/*------MENU------*/
.menu-section {
background-color: #edb12f;
display: flex;
width: 100%;
top: -60px;
position: relative;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
}
.menu-section h1 {
font-size: 9.5rem;
margin-top: 0;
position: absolute;
left: 130px;
margin-bottom: 60px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.column-left, .column-right, .column-middle {
flex-basis: 33.33%;
margin-top: 230px;
}
.column-left {
display: flex;
justify-content: flex-end;
}
.column-left .menu-h2:after {
display: block;
content: "beans and rice included";
color: white;
font-size: 1.5rem;
font-family: 'Josefin Sans';
margin-top: -25px;
}
.column-middle h2:after, .column-right h2:after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: white;
border-radius: 3px;
margin-top: -25px;
}
.column-middle {
display: flex;
justify-content: center;
}
.column-right {
display: flex;
justify-content: flex-start;
}
.column {
min-width: 420px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.column h2 {
display: inline-block;
align-self: center;
font-family: 'Cedarville Cursive';
color: #17a832;
font-size: 3rem;
}
.row {
font-family: 'Josefin Sans';
font-size: 1.5rem;
}
.row div {
display: flex;
justify-content: space-between;
}
.row div:after {
display: inline-block;
position: absolute;
content: "";
width: 100%;
margin-top: 33px;
border-top: 4px dotted black;
}
.price {
display: inline-block;
background: #edb12f;
overflow: hidden;
position: relative;
}
.menu-h2 {
text-align: center;
}
.design-left, .design-right {
position: absolute;
}
.design-right {
right: 0;
transform: rotate(180deg);
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right:60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*------HOURS------*/
.hours-section {
background-color: green;
width: 100%;
height: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mexican Restaurant</title>
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header">
<div class="nav-wrap">
<div class="nav-box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Menu</a>
<a href="#">Hours</a>
<a href="#">Contact</a>
<a href="#">Location</a>
<i class="fas fa-times" id="menu-close"></i>
</div>
</div>
<div class="info-wrap">
<p class="info">Authentic Mexican Food</p>
<div class="logo-wrap">
<div>YOUR</div>
<div>LOGO</div>
<div>HERE</div>
</div>
</div>
</div>
</header>
<main>
<div class="about-section">
<h1 class="about-h1">About Us</h1>
<div class="about-wrap">
<div class="about-info">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
</div>
<div class="image-slider-wrap">
<div class="image-slider">
<i class="fas fa-sort-up" id="left"></i>
<i class="fas fa-sort-up" id="right"></i>
</div>
</div>
</div>
</div>
<div class="menu-section">
<div class="design-left">
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
</div>
<div class="design-right">
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
</div>
<h1>Menu</h1>
<div class="column-left">
<div class="column">
<h2 class="menu-h2" id="combo-platter">Combination Platters</h2>
<div class="row">
<div>
<p>2 Beef Tacos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Enchiladas</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Tostada & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Taco & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Burrito & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Beef Burritos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Carne Asada Tacos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Carne Asada</p>
<p class="price">$6.69</p>
</div>
<div>
<p>Chorizo</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Machaca</p>
<p class="price">$6.35</p>
</div>
<div>
<p>Carnitas</p>
<p class="price">$5.89</p>
</div>
<div>
<p>2 Fish Tacos</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Chiles Rellenos</p>
<p class="price">$5.95</p>
</div>
</div>
</div>
</div>
<div class="column-middle">
<div class="column">
<h2 class="menu-h2">Enchiladas</h2>
<div class="row">
<div>
<p>2 Cheese</p>
<p class="price">$4.55</p>
</div>
<div>
<p>2 Beef</p>
<p class="price">$4.65</p>
</div>
<div>
<p>2 Chicken</p>
<p class="price">$3.55</p>
</div>
</div>
<h2 class="menu-h2">Side Orders</h2>
<div class="row">
<div>
<p>Carne Asada Fries</p>
<p class="price">$4.55</p>
</div>
<div>
<p>Jalepenos</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Quesadilla</p>
<p class="price">$3.55</p>
</div>
<div>
<p>Ham Quesadilla</p>
<p class="price">$4.55</p>
</div>
<div>
<p>1/2 Pint of beans</p>
<p class="price">$4.65</p>
</div>
<div>
<p>1/2 Pint of rice</p>
<p class="price">$4.55</p>
</div>
<div>
<p>Super Nachos</p>
<p class="price">$4.65</p>
</div>
<div>
<p>1 Tamale</p>
<p class="price">$4.65</p>
</div>
</div>
</div>
</div>
<div class="column-right">
<div class="column">
<h2 class="menu-h2">Enchiladas</h2>
<div class="row">
<div>
<p>2 Cheese</p>
<p class="price">$4.55</p>
</div>
<div>
<p>2 Beef</p>
<p class="price">$4.65</p>
</div>
<div>
<p>2 Chicken</p>
<p class="price">$3.55</p>
</div>
</div>
<h2 class="menu-h2">Side Orders</h2>
<div class="row">
<div>
<p>Carne Asada Fries</p>
<p class="price">$4.55</p>
</div>
<div>
<p>Jalepenos</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Quesadilla</p>
<p class="price">$3.55</p>
</div>
<div>
<p>Ham Quesadilla</p>
<p class="price">$4.55</p>
</div>
<div>
<p>1/2 Pint of beans</p>
<p class="price">$4.65</p>
</div>
<div>
<p>1/2 Pint of rice</p>
<p class="price">$4.55</p>
</div>
<div>
<p>Super Nachos</p>
<p class="price">$4.65</p>
</div>
<div>
<p>1 Tamale</p>
<p class="price">$4.65</p>
</div>
</div>
</div>
</div>
</div>
<div class="hours-section">
</div>
</main>
<footer>
</footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>解决方案
也许你可以使用这个技巧，如果你给价格和项目名称一个金色背景并给它一个相对定位，这样你就可以利用 z-index 属性它会为你做这个把戏。
将此代码添加到您的 css 文件中
.menu-section .row p {
background-color: #edb12f;
position: relative;
z-index: 1;
padding: 0 10px;
}
推荐阅读
- php - 用一个 PHP 发送多个文件，而不是同时发送
- amazon-web-services - kibana 仪表板问题
- github - Bitbucket 到 github 的现有存储库迁移
- javascript - 如何设置 webpack 将资产路径转换为另一个路径？
- java - 如何使用 Java 中的 xmlet / XsdParser 验证 XML 是否与 XSD 匹配
- reactjs - 如何使用 muidatatable 的删除按钮？
- django - 向前端发送用户拥有的权限
- javascript - Nodejs：合并连接多个文件
- c# - System.Globalization.CultureInfo.CurrentUICulture 和 System.Threading.Thread.CurrentUICulture 有什么区别
- java - 关于 Hibernate bean 验证