css - 溢出 : hidden; and z-index aren't able to hide an element beneath it?-6ren

css - 溢出 : hidden; and z-index aren't able to hide an element beneath it?

转载作者：太空宇宙更新时间：2023-11-04 06:13:40

所以我在我的网页上制作了一个菜单部分。我有一条虚线，我想将它从菜单项连接到相应的价格。我在每个菜单项的父级上使用 :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;
}

关于css - 溢出 : hidden; and z-index aren't able to hide an element beneath it?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56195113/

文章推荐： python - Apache日志文件数据分析与python pandas

文章推荐： python - 为创建出站连接池的适配器设置记录 WLST 脚本

文章推荐： python - 如何将 CURL 命令转换为 Python

haskell - monad 转换器的最佳实践 : to hide or not to hide 'liftIO'
我先说我是一个新手 Haskell 程序员(这些年来偶尔会修改它)但是当谈到 OOO 和命令式编程时，我有几年的时间。我目前正在学习如何使用 monad 并通过使用 monad 转换器将它们组合起来(
hide - 选择 2 : Hide certain options dynamically
基本上我正在寻找的是能够从选择项的下拉列表中隐藏选项的能力。因此，从技术上讲，它们仍然是选项，但由于它们是隐藏的，因此您将无法单击它们。我查看了文档并找到了与禁用相关的内容，不幸的是我非常希望能够隐
javascript - 平均堆栈应用: can't hide content using directive "ng-hide' "
我正在制作一个平均堆栈应用程序，但遇到了一个问题!我尝试在第 10 个问题问完后隐藏所有内容。我使用指令 ng-hide，当我到达第 10 个问题时，该指令被设置为 true!这是代码:
jQuery 按钮 : "like this"/"dislike this" - Hide all liked/hide all disliked
好吧，我正在尝试对我发现的网站上的一项功能进行逆向工程 - 网站管理员没有回复我。有问题的网站是http://www.win-free-stuff.ca/new-contests特别是，我正在尝试构建
javascript - 什么是 ng-hide-add、ng-hide-active
我正在为一个 div 设置动画。它具有以下定义: ... 我定义了以下 CSS: div.ng-hide { transition: 0.5s linear opacity; opac
Excel异常行为: hiding ribbon also hides TITLE bar if application is invisible
我正在创建一个自定义应用程序，它将在其自己单独的 Excel 实例(新应用程序)中启动。新创建的实例默认不可见，因此需要手动使其可见。我喜欢仅在一切设置完毕后才让我的应用程序可见 - 以避免屏幕闪烁
javascript - 测试由警报 : div not hiding 分隔的 jQuery .hide() 和 .show()
这是非常基本的代码: $('.myDiv').click(function() { $('.anotherDiv').hide(); alert('pause the ui');
javascript - Angular : Why is my div not showing/hiding with ng-show/ng-hide?
我正在尝试为一些图片制作一个 super 简单的灯箱。基本上我有一个 div，其中包含一组使用 ng-repeat 显示的图像，我希望在单击其中一个图像时显示一个灯箱 div。我不知道为什么我的灯箱
javascript - ng-hide-remove 和 ng-hide-add 的动画转换表现不同
我正在尝试为制作动画单击按钮从左侧滑入/滑出。我正在使用 Angular 框架和 ng-show控制显示/可见性，并将转换添加到 ng-hide样式集。我已经成功地让 div 从左边滑入，但是
jquery-ui - 如何克服 jQuery hide() 和 jQuery UI hide() 之间的差异
我正在写一个非常简单的幻灯片，我使用的是“常规”hide()，如下所示: jQuery("#featured li:nth-child(1)").hide('slow'); 这不仅隐藏了里，而且还慢慢
javascript - 在 Bootstrap 中防止在移动设备上加载带有 hide-md 或 hide-lg 的图像的最佳方法是什么？
我有一个产品页面，在 Bootstrap 中以砖石格式显示 -md 和 -lg(中型和大型)屏幕的结果，其中图像可能具有不同的高度 - 对于 -sm 或 -xs，我对较小的设备使用相同高度的图像。我有
WindowInsetsController#hide(statusBars()) causes content to jump(WindowInsetsController#Hide(statusBars())导致内容跳转)
在我的活动召唤的那一刻。在其onCreate方法内部，以隐藏状态栏并以全屏模式显示。。作为向Android 30迁移的一部分，正如文档所建议的那样，我用WindowInsetsController#H
jquery - Bootstrap : How to fade and then hide something using the default 'fade' , 'hide' 、 'in' 类？
Bootstrap 显然使用了“hide”、“fade”和“in”类来进行转换。我遇到的问题是使用“fade”和“in”会将不透明度从0更改为1。过渡效果很完美，但内容仍然占据页面上的空间，即使您看
Cocoa 菜单栏以编程方式使用 NSMenu，如何获取标准项目 "Services"、 "Hide App"、 "Hide Others"、 "Show All"等
在脱碳过程中，我现在开始使用 NSMenu 以编程方式创建菜单栏。 Carbon 似乎非常适合将标准项目添加到应用程序菜单:服务、隐藏应用程序、隐藏其他、显示全部、退出应用、甚至可以使用系统偏好设置的
javascript - Angular : hide without gap using ng-hide/ng-show
我有这样的代码: Hello how are you td1 被正确隐藏，但是当 td2 被隐藏时，它
javascript - jQuery "show/hide div on click"和 "click outside to hide"不能一起工作
//我搜索了但没有运气，所以我开始一个新问题 :) 我有: Notification 我想要:当我点击这个 a ，它将显示/隐藏一个 div，当我在该 div 外部单击时，如果它可见，它就会隐藏。我
javascript - Angular animate 不添加 ng-hide-add 和 ng-hide-add-active
Test App.js: (function() { angu
javascript - 制作一个没有 ng-show 或 ng-hide 的 AngularJS "hide and show"解决方案
想要基于下拉(选择)隐藏或显示 AngularJS 上的元素，但由于该页面是与 QlikSense 的混搭，因此来自 Qlik 的元素不能与 ng-show 很好地配合。我用 ng-show 尝试了这
jquery - 如何使代码更简单，如果我需要单击 a eq(0) show b eq(0) hide other, a eq(1) show b eq(1) hide other..？
如何使下面的代码更简单、更少？谢谢。 012 012 $('.btn div:eq(0)').click(function(){ $('.content div').hide();
jQuery 手机 : How to 1) remove/hide the title bar from the dialog box and 2) just remove/hide the "X" icon from the title bar?
我看到一些方法可以在 jQuery UI 的对话框中隐藏标题栏和标题栏中的图标，但在 jQuery Mobile 中没有。有谁知道如何在 jQuery Mobile 中做到这一点？从对话框中删除/隐

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 溢出 : hidden; and z-index aren't able to hide an element beneath it?