如何将悬停的图像放入背景？

【问题标题】：How to get hovered images into background ?如何将悬停的图像放入背景？
【发布时间】：2017-07-18 12:27:09
【问题描述】： 

@charset "utf-8";

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #F2F2F2; 
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
	position: fixed;
	background: #333333;
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
	top: 0;
}

#header-content {
	background: #333333;
	width: 1280px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	position: absolute;
}

#currentsite-info font {
	position: absolute;
	height: 30px;
	width: auto;
	margin-left: 60px;
	padding: 10px;
	color: #fff;
	font-size: 26px;
}

#search-box {
	width: 400px;
	height: 50px;
	margin-right: auto;
	margin-left: auto;
}

#search {
	background: #fff;
	width: 356px;
	height: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 6px 0 0 6px;	
}

#submit {
	float: right;
	background: #fff;
	width: 29px;
	height: 28px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0 6px 6px 0;	
}

#menu {
	margin-right: 30px;
	margin-left: 25px;
	z-index: 1000;
}

.menu-linkbox a{
	position: static;
	float: right;
	width: 60px;
	height: 14px;
	top: 0;
	padding: 18px 15px 18px 15px;
	color: #F2F2F2;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
}

.menu-linkbox:hover a {
	color: #2997D3;
	transition: all 500ms;
}

#menu-linkbox-live a {
	color: #2997D3;
}

#main-content {
	background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
	padding-top: 50px;
	overflow: auto;
}

#content-articles {
	background: #F2F2F2;
	width: 1220px;
	bottom: 0;
	margin: 20px;
	padding: 10px;
	border: 1px solid #000;
	overflow: auto;
}

#article1 {
	width: 550px;
	margin: 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article1 h1 {
	font-size: 40px;
}

#article1-content {
	width: 100%;
}

#photo1 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo1:hover {
	opacity: 0.8;
}

#article2 {
	width: 550px;
	margin: 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article2 h1 {
	font-size: 40px;
}

#article2-content {
	width: 100%;
}

#photo2 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo2:hover {
	opacity: 0.8;
}

#article3 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article3 h1 {
	font-size: 40px;
}

#article3-content {
	width: 100%;
}

#photo3 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo3:hover {
	opacity: 0.8;
}

#article4 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article4 h1 {
	font-size: 40px;
}

#article4-content {
	width: 100%;
}

#photo4 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo4:hover {
	opacity: 0.8;
}

#imprint {
	background: #333333;
	bottom: 0;
	width: 100%;
}

#imprint-content {
	background: #333333;
	width: 1280px;
	height: 150px;
	margin: auto;
}

#about-info {
	width: 300px;
	height: 130px;
	float: left;
	margin-left: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#about-info h2 {
	text-align: center;
}

#about-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

#contact-info {
	position: static;
	width: 300px;
	height: 130px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#contact-info h2 {
	text-align: center;
}

#contact-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}


#legal-info {
	width: 300px;
	height: 130px;
	float: right;
	margin-right: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#legal-info h2 {
	text-align: center;
}

#legal-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

h1 {
	color: #2997D3;
	font-size: 20px;
	text-align: center;
	margin-bottom: 20px; 	
}

p {
	margin: 20px;	
}

a {
	color: #2997D3;
}
<!doctype html>
<html>

	<head> 
	
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
		
		<link rel="icon" href="images/logo_site.png">
		
		<title>Topics</title>
	
		<script>
			function toggleNavPanel(x){
				var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
				if(panel.style.height == maxH){
					panel.style.height = "0px";
					navarrow.innerHTML = "&#9662;";
				} 
			
				else {
					panel.style.height = maxH;
					navarrow.innerHTML = "&#9652;";
				}
			}
		</script>
	
	</head>
	
	<body>
	
		<div id="header">
		
			<div id="header-content">
		
				<img id ="logo" src="images/logo.png" />
				
				<div id="currentsite-info">
				
					<font>Topics</font>
				
				</div>
				
				<div id="menu">					
					
					<div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
						
					<div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div> 

					<div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>

					<div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
					
				</div>
				
				<div id="search-box">
			
					<form action="http://www.google.com/search" method="get">
			
						<input id="search" type="text" name="q" placeholder="Search">
			
						<input id="submit" type="image" src="images/search.png" alt="Submit">
		 
					</form>
			
				</div>
			
			</div>
			
		</div>
		
		<div id="main-content">
		
			<div id="content-articles">
			
				<div id="article1">	
				
					<div id="article1-content">
						
						<h1>Politics</h1>
						
					</div>
					
					<div id="article1-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo1" src="images/footage/topic1adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article2">	
				
					<div id="article2-content">
						
						<h1>Healthcare</h1>
						
					</div>
					
					<div id="article2-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article3">	
				
					<div id="article3-content">
						
						<h1>Network</h1>
						
					</div>
					
					<div id="article3-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article4">	
				
					<div id="article4-content">
						
						<h1>Travel</h1>
						
					</div>
					
					<div id="article4-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
						
					</div>
			
				</div>
			
			</div>
		
		</div>
		
		<div id="imprint">
			
			<div id="imprint-content">
			
				<div id="about-info">
						
					<h2>About Us</h2>
			
					<p>
			
						Company information 

					</p>
						
				</div>
				
				<div id="legal-info">
						
					<h2>Legal Use</h2>
			
					<p>
			
						Copyright information
			
					</p>
						
				</div>
				
				<div id="contact-info">
						
					<h2>Contact</h2>
			
					<p>
			
						Contact information 

					</p>
						
				</div>
			
			</div>	

		</div>
	
	</body>

</html>

您好，我已经为您提供了我当前网站的 sn-p。它有4张图片和一个固定的标题。当您将鼠标悬停在图片上时，它们的不透明度正在改变（1-> 0.8）。我的问题是他们也在标题上......我尝试使用 z-index 但它不起作用，关于如何将它们放在标题后面的任何想法？

【问题讨论】：

    标签： html image css hover z-index


    【解决方案1】：

    我将 z-index 属性添加到您的 #header 和 #main-content css 类中，悬停时不再有任何重叠。

    我还删除了您在图像本身（#photo1 等）上设置的 z-index 值，因为在 #main-content 上设置的 z-index 也适用于它们，因为它们是它的子级。

    希望这会有所帮助。

    @charset "utf-8";

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #F2F2F2; 
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
	position: fixed;
	background: #333333;
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
	top: 0;
  z-index: 1;
}

#header-content {
	background: #333333;
	width: 1280px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	position: absolute;
}

#currentsite-info font {
	position: absolute;
	height: 30px;
	width: auto;
	margin-left: 60px;
	padding: 10px;
	color: #fff;
	font-size: 26px;
}

#search-box {
	width: 400px;
	height: 50px;
	margin-right: auto;
	margin-left: auto;
}

#search {
	background: #fff;
	width: 356px;
	height: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 6px 0 0 6px;	
}

#submit {
	float: right;
	background: #fff;
	width: 29px;
	height: 28px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0 6px 6px 0;	
}

#menu {
	margin-right: 30px;
	margin-left: 25px;
	z-index: 1000;
}

.menu-linkbox a{
	position: static;
	float: right;
	width: 60px;
	height: 14px;
	top: 0;
	padding: 18px 15px 18px 15px;
	color: #F2F2F2;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
}

.menu-linkbox:hover a {
	color: #2997D3;
	transition: all 500ms;
}

#menu-linkbox-live a {
	color: #2997D3;
}

#main-content {
	background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
	padding-top: 50px;
	overflow: auto;
  z-index: -1;
}

#content-articles {
	background: #F2F2F2;
	width: 1220px;
	bottom: 0;
	margin: 20px;
	padding: 10px;
	border: 1px solid #000;
	overflow: auto;
}

#article1 {
	width: 550px;
	margin: 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article1 h1 {
	font-size: 40px;
}

#article1-content {
	width: 100%;
}

#photo1 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo1:hover {
	opacity: 0.8;
}

#article2 {
	width: 550px;
	margin: 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article2 h1 {
	font-size: 40px;
}

#article2-content {
	width: 100%;
}

#photo2 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo2:hover {
	opacity: 0.8;
}

#article3 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article3 h1 {
	font-size: 40px;
}

#article3-content {
	width: 100%;
}

#photo3 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo3:hover {
	opacity: 0.8;
}

#article4 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article4 h1 {
	font-size: 40px;
}

#article4-content {
	width: 100%;
}

#photo4 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
}

#photo4:hover {
	opacity: 0.8;
}

#imprint {
	background: #333333;
	bottom: 0;
	width: 100%;
}

#imprint-content {
	background: #333333;
	width: 1280px;
	height: 150px;
	margin: auto;
}

#about-info {
	width: 300px;
	height: 130px;
	float: left;
	margin-left: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#about-info h2 {
	text-align: center;
}

#about-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

#contact-info {
	position: static;
	width: 300px;
	height: 130px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#contact-info h2 {
	text-align: center;
}

#contact-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}


#legal-info {
	width: 300px;
	height: 130px;
	float: right;
	margin-right: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#legal-info h2 {
	text-align: center;
}

#legal-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

h1 {
	color: #2997D3;
	font-size: 20px;
	text-align: center;
	margin-bottom: 20px; 	
}

p {
	margin: 20px;	
}

a {
	color: #2997D3;
}
    <!doctype html>
<html>

	<head> 
	
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
		
		<link rel="icon" href="images/logo_site.png">
		
		<title>Topics</title>
	
		<script>
			function toggleNavPanel(x){
				var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
				if(panel.style.height == maxH){
					panel.style.height = "0px";
					navarrow.innerHTML = "&#9662;";
				} 
			
				else {
					panel.style.height = maxH;
					navarrow.innerHTML = "&#9652;";
				}
			}
		</script>
	
	</head>
	
	<body>
	
		<div id="header">
		
			<div id="header-content">
		
				<img id ="logo" src="images/logo.png" />
				
				<div id="currentsite-info">
				
					<font>Topics</font>
				
				</div>
				
				<div id="menu">					
					
					<div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
						
					<div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div> 

					<div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>

					<div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
					
				</div>
				
				<div id="search-box">
			
					<form action="http://www.google.com/search" method="get">
			
						<input id="search" type="text" name="q" placeholder="Search">
			
						<input id="submit" type="image" src="images/search.png" alt="Submit">
		 
					</form>
			
				</div>
			
			</div>
			
		</div>
		
		<div id="main-content">
		
			<div id="content-articles">
			
				<div id="article1">	
				
					<div id="article1-content">
						
						<h1>Politics</h1>
						
					</div>
					
					<div id="article1-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo1" src="images/footage/topic1adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article2">	
				
					<div id="article2-content">
						
						<h1>Healthcare</h1>
						
					</div>
					
					<div id="article2-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article3">	
				
					<div id="article3-content">
						
						<h1>Network</h1>
						
					</div>
					
					<div id="article3-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article4">	
				
					<div id="article4-content">
						
						<h1>Travel</h1>
						
					</div>
					
					<div id="article4-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
						
					</div>
			
				</div>
			
			</div>
		
		</div>
		
		<div id="imprint">
			
			<div id="imprint-content">
			
				<div id="about-info">
						
					<h2>About Us</h2>
			
					<p>
			
						Company information 

					</p>
						
				</div>
				
				<div id="legal-info">
						
					<h2>Legal Use</h2>
			
					<p>
			
						Copyright information
			
					</p>
						
				</div>
				
				<div id="contact-info">
						
					<h2>Contact</h2>
			
					<p>
			
						Contact information 

					</p>
						
				</div>
			
			</div>	

		</div>
	
	</body>

</html>

    【讨论】：

      【解决方案2】：

      z-index only works on positioned elements

      所以，我已将 position: relative 添加到 #photo1 和 z-index: 1 到 header。 奖励 - 添加了托管照片的链接，而不是您提供的非工作本地路径，因此您可以看到它工作。

      @charset "utf-8";

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #F2F2F2; 
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
	position: fixed;
	background: #333333;
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
	top: 0;
    z-index: 1;
}

#header-content {
	background: #333333;
	width: 1280px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	position: absolute;
}

#currentsite-info font {
	position: absolute;
	height: 30px;
	width: auto;
	margin-left: 60px;
	padding: 10px;
	color: #fff;
	font-size: 26px;
}

#search-box {
	width: 400px;
	height: 50px;
	margin-right: auto;
	margin-left: auto;
}

#search {
	background: #fff;
	width: 356px;
	height: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 6px 0 0 6px;	
}

#submit {
	float: right;
	background: #fff;
	width: 29px;
	height: 28px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0 6px 6px 0;	
}

#menu {
	margin-right: 30px;
	margin-left: 25px;
	z-index: 1000;
}

.menu-linkbox a{
	position: static;
	float: right;
	width: 60px;
	height: 14px;
	top: 0;
	padding: 18px 15px 18px 15px;
	color: #F2F2F2;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
}

.menu-linkbox:hover a {
	color: #2997D3;
	transition: all 500ms;
}

#menu-linkbox-live a {
	color: #2997D3;
}

#main-content {
	background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
	padding-top: 50px;
	overflow: auto;
}

#content-articles {
	background: #F2F2F2;
	width: 1220px;
	bottom: 0;
	margin: 20px;
	padding: 10px;
	border: 1px solid #000;
	overflow: auto;
}

#article1 {
	width: 550px;
	margin: 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article1 h1 {
	font-size: 40px;
}

#article1-content {
	width: 100%;
}

#photo1 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
    position: relative;
}

#photo1:hover {
	opacity: 0.8;
}

#article2 {
	width: 550px;
	margin: 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article2 h1 {
	font-size: 40px;
}

#article2-content {
	width: 100%;
}

#photo2 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo2:hover {
	opacity: 0.8;
}

#article3 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: left;
	text-align: justify;
	word-spacing: 4px;
}

#article3 h1 {
	font-size: 40px;
}

#article3-content {
	width: 100%;
}

#photo3 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo3:hover {
	opacity: 0.8;
}

#article4 {
	width: 550px;
	margin: 60px 10px 10px 10px;
	float: right;
	text-align: justify;
	word-spacing: 4px;
}

#article4 h1 {
	font-size: 40px;
}

#article4-content {
	width: 100%;
}

#photo4 {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid #2997D3;
	display: block;
	transition: all 500ms;
	z-index: -1000;
}

#photo4:hover {
	opacity: 0.8;
}

#imprint {
	background: #333333;
	bottom: 0;
	width: 100%;
}

#imprint-content {
	background: #333333;
	width: 1280px;
	height: 150px;
	margin: auto;
}

#about-info {
	width: 300px;
	height: 130px;
	float: left;
	margin-left: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#about-info h2 {
	text-align: center;
}

#about-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

#contact-info {
	position: static;
	width: 300px;
	height: 130px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#contact-info h2 {
	text-align: center;
}

#contact-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}


#legal-info {
	width: 300px;
	height: 130px;
	float: right;
	margin-right: 20px;
	padding: 10px 20px 10px 20px;
	vertical-align: middle;
	font-size: 18px;
	text-align: justify;
	color: #fff;
}

#legal-info h2 {
	text-align: center;
}

#legal-info p {
	margin: 20px;
	text-align: center;
	vertical-align: middle;
}

h1 {
	color: #2997D3;
	font-size: 20px;
	text-align: center;
	margin-bottom: 20px; 	
}

p {
	margin: 20px;	
}

a {
	color: #2997D3;
}
      <!doctype html>
<html>

	<head> 
	
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
		
		<link rel="icon" href="images/logo_site.png">
		
		<title>Topics</title>
	
		<script>
			function toggleNavPanel(x){
				var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
				if(panel.style.height == maxH){
					panel.style.height = "0px";
					navarrow.innerHTML = "&#9662;";
				} 
			
				else {
					panel.style.height = maxH;
					navarrow.innerHTML = "&#9652;";
				}
			}
		</script>
	
	</head>
	
	<body>
	
		<div id="header">
		
			<div id="header-content">
		
				<img id ="logo" src="images/logo.png" />
				
				<div id="currentsite-info">
				
					<font>Topics</font>
				
				</div>
				
				<div id="menu">					
					
					<div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
						
					<div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div> 

					<div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>

					<div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
					
				</div>
				
				<div id="search-box">
			
					<form action="http://www.google.com/search" method="get">
			
						<input id="search" type="text" name="q" placeholder="Search">
			
						<input id="submit" type="image" src="images/search.png" alt="Submit">
		 
					</form>
			
				</div>
			
			</div>
			
		</div>
		
		<div id="main-content">
		
			<div id="content-articles">
			
				<div id="article1">	
				
					<div id="article1-content">
						
						<h1>Politics</h1>
						
					</div>
					
					<div id="article1-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo1" src="http://www.mtv.com/crop-images/2013/09/11/Foo%20Fighters%20officail.jpg" /></a>
						
					</div>
			
				</div>
				
				<div id="article2">	
				
					<div id="article2-content">
						
						<h1>Healthcare</h1>
						
					</div>
					
					<div id="article2-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article3">	
				
					<div id="article3-content">
						
						<h1>Network</h1>
						
					</div>
					
					<div id="article3-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
						
					</div>
			
				</div>
				
				<div id="article4">	
				
					<div id="article4-content">
						
						<h1>Travel</h1>
						
					</div>
					
					<div id="article4-photo">
					
						<a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
						
					</div>
			
				</div>
			
			</div>
		
		</div>
		
		<div id="imprint">
			
			<div id="imprint-content">
			
				<div id="about-info">
						
					<h2>About Us</h2>
			
					<p>
			
						Company information 

					</p>
						
				</div>
				
				<div id="legal-info">
						
					<h2>Legal Use</h2>
			
					<p>
			
						Copyright information
			
					</p>
						
				</div>
				
				<div id="contact-info">
						
					<h2>Contact</h2>
			
					<p>
			
						Contact information 

					</p>
						
				</div>
			
			</div>	

		</div>
	
	</body>

</html>

      【讨论】：

      • 什么意思？
      • 如果你给一个元素z-index它必须有一个position属性。
      猜你喜欢
      • 2013-01-27
      • 2011-04-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-11-02
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode