响应图像上的居中按钮

Question

我有一个图像，我将制作一个按钮，我想在响应式图像上居中。但是我不知道如何将它放在图像上，或者防止它隐藏在图像后面。我尝试了z-index，但失败了。请参见div“按钮”。提前谢谢！

@font-face {
    font-family: Gudea;
    src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

p {
	margin: 0 0 1em 0;
	font-size: 93%;
	line-height: 1.5em;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	padding: 0;
	margin: 0;
	background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}

img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px 0;
}

/* Section Inner */
div.section-inner {
	max-width: 1100px;
	padding: 0 25px;
	margin: 0 auto;
}

/* Header */
div.header {
	background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
	margin-top:40px;
	height: 30px;
	background-color: #E9E9E9;
	padding: 40px 0;
}


/*Logo*/

h1 span {
    position: absolute;
    top: 97px;
    left: 50%;
    width: 402px;
    height: 160px;
    margin: -80px 0 0 -201px;
    text-indent: -999em;
    z-index: 99;
    background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}

/*Satooth Pattern*/

h2 span {
    position: absolute;
    top: 140px;
    height: 20px;
    text-indent: -999em;
    z-index: 90;
    background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
    background-repeat: repeat-x;
    width: 100%;
}

/*Sawtooth Pattern Two*/

h3 span {
    position: absolute;
    margin-top: -30px;
    height: 40px;
    text-indent: -999em;
    z-index: 90;
    background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
    background-repeat: repeat-x;
    width: 100%;
}



/* Navigation */

#mainMenuCheck {
	/* display none breaks this in some browsers, so just slide it out of view */
	position:absolute;
	left:-999em;
}

#mainMenu {
	position:relative; /* depth sort over h1 */
	background:#754 url(images/dots.png) top left;
	padding:0.40em 0.75em 0.05em;
	/* left margin adjusts for uneven menu width, change as needed */
	text-align:center;
}

#mainMenu li {
	list-style:none;
	display:inline;
}

#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
	color:#F0E8E0;
	text-shadow:
		0 0 2px #000,
		2px 2px 2px #000,
		2px 2px 3px #000;
}

#mainMenu a {
	display:inline-block;
	vertical-align:bottom;
	text-decoration:none;
	color:#F0E8E0;
	-webkit-transition:color 0.3s, text-shadow 0.3s;
	transition:color 0.3s, text-shadow 0.3s;
}

#mainMenu a.current {
	color:#87C6BC;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#87C6BC;
}

#mainMenu a:after {
	display:inline-block;
	padding:0 0.1em 0 0.5em;
	color:#FFF;
}

#mainMenu .lastInSet a:after {
	display:none;
}

#mainMenu .setBreak {
	padding-right:8em;
}

#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
	content:"\2605";
	font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}

#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
	position:absolute;
	left:50%;
	width:3em;
	bottom: 1em;
}

#mainMenu:after {
	bottom:0.3em;
	font-size:150%;
	margin-left:-1.5em;
}

#mainMenu ul:before {
	margin-left:-3em;
}



/* Body Content */
div.body-content {
	padding: 50px 0;
	background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
	font-family: Gudea;

}

button {

	
}


/* Thirds */


div.thirds {
	padding-bottom: 50px;
	text-align: center;
	font-family: Gudea;
}

div.one-third {
	width: 30%;
	float: left;
	margin-right: 5%;
	text-align: center;
	font-family: Gudea;
}

div.one-third-last {
	margin: 0;
	text-align: center;
	font-family: Gudea;

}

h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;

}



/* Main Column */
div.main {
	width: 100%;
	float: left;
	margin-top: -30px;
	margin-right: 5%;
	text-align: center;
	padding-bottom:20px;
	font-family: Gudea;
	position: relative;
}



/* Footer */
div.footer {
	background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
	margin-top: 30px;
	margin-bottom: 30px;
	color: #FFF;
	padding: 15px 0;
	text-align: center;
}


.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*Mobile Nav*/

@media (min-width:900px) {

	.header2 {
		display: none;
	}

	.menu {
		display: none;
	}


}

@media (max-width:900px) {

	body {
	  z-index: 100; 
	  margin:;
	  font-family: font:bold 16px/18px arial,helvetica,sans-serif;
	  background-color: #f4f4f4;
	  

	}

	a {
	  color: #F8F4E6;
	  text-shadow:
		0 0 5px #000,
		5px 5px 5px #754;
	}

	.menu a:before,
	.menu ul:before,
	.menu ul:before {
		content:"\2605";

	}


	/* header */

	.header2 {
	  background-color:#6A4E39;
	  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
	  position: relative;
	  width: 100%;
	  z-index: 3;


	}

	.header2 ul {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	  overflow: hidden;
	  background-image:none;

	}

	.header2 li a {
	  display: block;
	  padding: 20px 20px;
	  border-right: 1px solid #f4f4f4;
	  text-decoration: none;
	}

	.header2 li a:hover,
	.header2 .menu-btn:hover {
		background-color:#4EB4AC;
	  
	}

	.header2 .logo {
	  display: block;
	  float: left;
	  font-size: 15px;
	  padding: 10px 20px;
	  margin-top: 15px;
	  text-decoration: none;
	}

	/* menu */

	.header2 .menu {
	  clear: both;
	  max-height: 0;
	  transition: max-height .2s ease-out;
	 
	}

	/* menu icon */

	.header2 .menu-icon {
	  cursor: pointer;
	  display: inline-block;
	  float: right;
	  padding: 28px 20px;
	  position: relative;
	  user-select: none;
	}

	.header2 .menu-icon .navicon {
	  background: #F8F4E6;
	  display: block;
	  height: 2px;
	  position: relative;
	  transition: background .2s ease-out;
	  width: 18px;
	}

	.header2 .menu-icon .navicon:before,
	.header2 .menu-icon .navicon:after {
	  background: #F8F4E6;
	  content: '';
	  display: block;
	  height: 100%;
	  position: absolute;
	  transition: all .2s ease-out;
	  width: 100%;
	  margin-top: 7px;
	}

	.header2 .menu-icon .navicon:before {
	  top: 03px;
	}

	.header2 .menu-icon .navicon:after {
	  top: -2px;
	}

	/* menu btn */

	.header2 .menu-btn {
	  display: none;
	}

	.header2 .menu-btn:checked ~ .menu {
	  max-height: none;
	}

	.header2 .menu-btn:checked ~ .menu-icon .navicon {
	  background: transparent;
	}

	.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
	  transform: rotate(-45deg);
	}

	.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
	  transform: rotate(45deg);
	}

	.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	  top: 0;
	}
}

/* 48em = 768px */


@media (max-width: 899px) {
  #mainMenu {
 	display: none;
  	justify-content: center;
  }


/* section */

.section {
  overflow: hidden;
  margin: auto;
  max-width: 1400px;
}

.section a {
  position: relative;
  float: left;
  width: 100%;
}

.section a img {
  width: 100%;
  display: block;
}

.section a span {
  color: #fff;
  position: absolute;
  left: 5%;
  bottom: 5%;
  font-size: 2em;
  text-shadow: 1px 1px 0 #000;
}

.section-split a span {
  display: none;
}

.section-split a:hover span {
  display: block;
}


/* 48em = 768px */

@media (min-width: 48em) {
  .section-split a {
    width: 50%;
  }
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Introduction to Responsive Web Design</title>
	
	<meta name="viewport" content="width=device-width">
	
	<!-- css -->
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
	
</head>
<body>

<!--Logo-->

<h1>
	<a href="/">
		
		<span>-</span>
		
	</a>
</h1>

<!--Sawtooth Pattern-->

<h2>
	<a href="/">
		
		<span>-</span>
		
	</a>
</h2>


<!-- Header -->
	<div class="header"><div class="section-inner">

	</div></div>
	
<!-- Navigation -->
<div id="container">
 

<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>

<div id="mainMenu">
	<ul>

		<li><a href="#" class="current">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">What We Do</a></li>
		<li class="lastInSet setBreak"><a href="#">Events</a></li>
		
		<li><a href="#">Success Stories</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Events</a></li>
		<li class="lastInSet"><a href="#">Blog</a></li>

	</ul>

</div>

<!--Mobile Navigation-->

<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
  <a href="/" class="logo">Navigation</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">     Home</a></li>
    <li><a href="#about">     About</a></li>
    <li><a href="#careers">     What We Do</a></li>
    <li><a href="#contact">     Success Stories</a></li>
    <li><a href="#contact">     Contact</a></li>
    <li><a href="#contact">     Events</a></li>
    <li><a href="#contact">     Blog</a></li>
  </ul>
</header>
	
<!-- Body-Content -->
	<div class="body-content"><div class="section-inner">

		<div class="button">
			<img src="http://i63.tinypic.com/2hyxcls.jpg">
		</div>

	<div class="main"> 

	<img src="http://oi63.tinypic.com/14ifsz6.jpg">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


</div>
		
		<!-- thirds -->
		<div class="thirds clearfix">
			
			<!-- one-third -->
			<div class="one-third mobile-collapse">
				<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird on a fence" />
				<h2>The Trainer</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div><!--/one-third-->
			
			<!-- one-third -->
			<div class="one-third one-third-second mobile-collapse">
				<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird eating" />
				<h2>Lessons</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div><!--/one-third-->
			
			<!-- one-third -->
			<div class="one-third one-third-last mobile-collapse">
				<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A cat" />
				<h2>Training</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div><!--/one-third-->
			
		</div><!--/thirds-->
		
		
	</div></div><!--/body-content-->


<!--Sawtooth Pattern Two-->

<h3>
	<a href="/">
		
		<span>-</span>
		
	</a>
</h3>

	
<!-- Footer -->
	<div class="footer"><div class="section-inner">
		
		<p>Footer text placed here.</p>
		
	</div></div>

</body>
</html>

Answer 1

由于您为课程正文内容设置了背景图片，问题就出现了。如果删除它而不是将div的z-index设置为类 main 为-1，那么它会将按钮图片放在响应图像的顶部。

问题是你在没有设置正确的z-index的情况下在另一个上面使用了很多图像。试试我上面说的你会得到它的工作。希望它可以提供帮助

另请参阅已发布的与您的问题相关的答案。 Stacking multiple images with z-index

Answer 2

一个非常简单的解决方案是使用某种响应式容器，将底层图像设置为背景。使用：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;

然后将您的按钮图像放在容器内并像往常一样居中。