javascript - 内容隐藏在 div 之上-6ren

javascript - 内容隐藏在 div 之上

转载作者：太空宇宙更新时间：2023-11-04 10:34:05

我对 HTML/CSS 有熟练的了解，但我遇到了一个问题，这个问题让我难以自拔。为了测试我的技能，我在电视节目等网站上建立网站，而在设计网站时，我遇到了一个问题。如屏幕截图所示，虽然我在上一个之后声明了 div，但它似乎隐藏起来了。

如您所见。我已经尝试了段落标签和 div，似乎没有任何效果，我已经包含了 HTML 和 CSS。

body {
	padding:0;
	margin: 0;
	font-family: 'Raleway';

}

.nav {
	background-color: black;
	text-decoration: none;
	color: silver;
	margin: 0;
	list-style: none;
	text-align: center;
}

.nav > li {
	display: block;
}

/* .nav > li:before {
	content: "*";
} */

.nav > li > a {
	text-decoration: none;
	color: silver;
	font-size:24px;
	text-transform: uppercase;
	font-weight: bolder;
	letter-spacing: 4px;
}

.nav-btn {
	display:block;
	font-size: 30px;
	background-color: black;
	color: silver;
	text-align: center;
	cursor: pointer;
}

.image {
	background-image:url('download1.jpg');
	width:100%;
    max-height:400px;
    background-position: left center absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
}

.title {
	display: inline-block;
	color: white;
	position:relative;
	margin: 15%;
	text-transform: uppercase;
}

.image {
	text-align: center;
	position:absolute;
}

.image > h2 {
	padding-top: 50%;
	line-height: 50%;

}


@media screen and (max-width: 411px) {
	.title > h2 {
		font-size: 15px;
	}

	.image {
		max-height:280px;
	}
}

.submitbox {
	color: yellow;
	background-color: darkblue;
	z-index: 1 !important;
}

<!DOCTYPE html>
<head>
<title>Welcome to France!</title>
<link rel="stylesheet" href="Reign.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <div id="header">"Today I am King!"</div> -->
<nav>
	<span class="nav-btn">Menu</span>
  <ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Contact</a></li>
  </ul>
 </nav>
<div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div>
<div id="submitbox"><h2>Sign up for our Newsletter!</h2></div>
<p>hello</p>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function () {
	$('ul.nav').toggle();
});
</script>
</body>

部分代码与我的要求无关。另外，我有一个菜单，但它在页面加载时打开，想知道如何在页面加载时关闭它吗？另外运行代码片段并不能说明我在说什么，因为图像丢失了。

编辑:important 用于尝试将 H2 带到图像的前面，这在运行代码片段时是看不到的。我使用了 position abolute，所以当任何调整都不会影响所说的样式，对不起，如果我做错了。还更改了图像。

EDIT2:我刚刚意识到我为什么使用绝对位置，这是为了在窗口缩小时阻止图像上下出现白条 White bars?

最佳答案

对于您的菜单问题，只需设置 display:none;给你的.nav它将开始不可见。对于您的其他问题，我认为将您的职位设置为绝对是导致问题的原因。通过将其更改为 position:relative (并将背景设置为绿色以便您可以看到它)，div 出现并且不会阻止新闻稿文本。绝对 div 不关心它周围还有什么。如果设置为绝对，它将是相对于其最近祖先的位置，在您的 HTML 中，是 <body>

此外，您标记 id="submitbox"但在 css 中用 .submitbox 引用它而不是 #submitbox

body {
	padding:0;
	margin: 0;
	font-family: 'Raleway';

}

.nav {
    display:none;
	background-color: black;
	text-decoration: none;
	color: silver;
	margin: 0;
	list-style: none;
	text-align: center;
}

.nav > li {
	display: block;
}

/* .nav > li:before {
	content: "*";
} */

.nav > li > a {
	text-decoration: none;
	color: silver;
	font-size:24px;
	text-transform: uppercase;
	font-weight: bolder;
	letter-spacing: 4px;
}

.nav-btn {
	display:block;
	font-size: 30px;
	background-color: black;
	color: silver;
	text-align: center;
	cursor: pointer;
}

.image {
	background-image:url('download1.jpg');
	width:100%;
    max-height:400px;
    background-position: left center absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
}

.title {
	display: inline-block;
	color: white;
	position:relative;
	margin: 15%;
	text-transform: uppercase;
}

.image {
	text-align: center;
	position:relative;
  background-color:green;
}

.image > h2 {
	padding-top: 50%;
	line-height: 50%;
}


@media screen and (max-width: 411px) {
	.title > h2 {
		font-size: 15px;
	}

	.image {
		max-height:280px;
	}
}

.submitbox {
	color: yellow;
	background-color: darkblue;
	z-index: 1 !important;
}

<!DOCTYPE html>
<head>
<title>Welcome to France!</title>
<link rel="stylesheet" href="Reign.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <div id="header">"Today I am King!"</div> -->
<nav>
	<span class="nav-btn">Menu</span>
  <ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Contact</a></li>
  </ul>
 </nav>
<div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div>
<div id="submitbox"><h2>Sign up for our Newsletter!</h2></div>
<p>hello</p>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function () {
	$('ul.nav').toggle();
});
</script>
</body>

关于javascript - 内容隐藏在 div 之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36294319/

文章推荐： html - 使用 srcset 和大小的响应图像

文章推荐： linux - 访问 GPIO 时出现段错误

文章推荐： python - 为什么这两条 Shebang 系列都兼容？

文章推荐： java - ButterKnife 5.1.1 Proguard 错误

javascript - 如何将内容放在 particle.js 之上/之上
因此，我试图在网站主体中创建导航和页脚，但 particle.js 不断覆盖这些元素。我试过 z-index 但它没有显示出来。 particle.js 不允许我触摸我的导航栏或页脚。会很感激一些帮助
javascript - 图像出现在另一图像之上/之上？
我正在为我的类(class)建立一个美食车网站。我想要有一个盘子的图像，然后一旦它被点击就会有一个不同的食物图像出现在它上面。我想知道可以使用哪种 javascript 或 else/if 语句来实现
html - 动态地将图像放置在彼此旁边/之上
我目前正在做一个元素，我有两张人体图像，正面和背面。图像设置为 height: 80vh。我的问题是:我一直在使用 bootstrap 在屏幕较宽时使图像并排流动，在屏幕高时使图像相互叠加，使用 co
datatables - 将处理语言放在 DataTable 之上
有没有办法将“处理...”语言放在 DataTable 对象的顶部而不是垂直中间？如果我有一张长 table ，它会隐藏在页面之外，因为它的默认位置在中间。 $('#example').dataTab
graphite - 人们编写了什么样的工具包来补充或在 statsd 之上？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
javascript - 我怎样才能让一条消息位于 html 之上？
问题我有一个表单，一旦用户填写并提交，我希望在表单上弹出一条消息，显示“现在坐下来放松一下吧……”。理想情况下，我希望此消息上有一个按钮表示“确定”。到目前为止我有什么？通过 ajax post
html - 如何让文本位于 div 之上？
我想在 div 之上制作一个菜单，所以文本基本上位于它之上(参见示例)。我想在同一个 div 中包含菜单的文本，所以 html 是这样的: Portfolio |
html - 如何让文本位于 div 之上？
我想在 div 之上制作一个菜单，所以文本基本上位于它之上(参见示例)。我想在同一个 div 中包含菜单的文本，所以 html 是这样的: Portfolio |
java - 将一个图像设置在另一个 android 之上
我想创建这样的布局: 我有 3 个不同的图像:背景、白色方 block 和 V 形符号。当我希望盒子从一侧移动到另一侧时，如何将它们定位为照片中的位置当 onClick 被触发时。我已经尝试过:
c# - 如何将按钮放在 WebView 之上
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码以重现它。参见 SSC
javascript - 获取元素鼠标在 JavaScript 之上
我正在尝试获取鼠标当前悬停的元素并将其返回。根据我迄今为止从研究中收集到的信息，这是执行此操作的代码: document.getElementById('theTable').onmouseo
android 按钮在 listview 之上
首先，我想说声抱歉，但我在设计 Android 应用程序时遇到了问题 :D我希望该按钮位于 ListView 下方。实际上该按钮位于 ListView 上方并隐藏了下部区域。我该如何解决？ scree
android - 如何知道用户是否在我的 Activity 之上？
我正在尝试使用 Swiperefreshlayout，它工作得很好，但我需要知道用户何时位于我的 Activity 顶部。我正在阅读这个，我发现了一个名为“setOnScrollListener”的方
Android 页脚固定在底部并将位于其他 View 之上
我想有两个按钮像页脚一样固定在底部屏幕上，其他 View 不会传递它或在两个按钮上重叠。它只会一直停留在底部。对不起我的英语不好。请帮我。顺便说一句，我不能发布图片，所以它需要 10 个声誉，这就是我
javascript - 如何将下拉菜单保持在 ActiveX 之上
我在所有页面上都有一个由 JavaScript 创建的下拉菜单，有些列最多有 20 个元素。在 Mozilla 浏览器中，此下拉列表显示在所有内容的最上方，但在 Internet Explorer 中
java - 组件未绘制在 Jpanel 之上
如果我直接在框架上绘画，它显示得很好，但船不会出现在面板顶部... package MoonBlast; import java.awt.BorderLayout; import java.awt.
java - 如何让我的组件位于我绘制的 JFrame 之上？
我已经着手设置我的 JFrame 的背景图像，但现在我的组件(我假设)卡在它后面。我已经尝试阅读有关顶级容器的内容，但我就是无法理解它 T_T。有人有主意吗？也许我需要找到另一种方式来设置背景图片？
ios - 将横向模式下的模态视图显示在纵向模式下的另一个 View 之上
我有一个 UIView (A)，它以纵向模式显示并附加了一个 UIButton。当用户单击按钮时，第二个 UIView (B) 被初始化并显示为 UIView A 顶部的模态视图。是否可以将第二个
html - 箭头定位在一条线上并位于所有 div 之上
我对这件事束手无策。我有几个 div。它们都有一个向下的箭头。它应该居中在中间，棕色线上和所有东西的顶部。最后一个 div 也应该有箭头。我尝试了 z-index、绝对和相对定位，但没有任何效果。
html - 使图像出现在 div 之上
我正在尝试使图像出现在父 div 之外，这样图像看起来就好像位于 div 上而不增加父 div 的高度。但是，无论我尝试过什么，图像都会被父 div 截断并且不会显示所有内容。我有一个 js fid

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 内容隐藏在 div 之上