0
我有一個圖像，我將成爲一個按鈕，我想在響應圖像的中心。但是我不知道如何將它置於圖像上，或者防止它隱藏在圖像後面。我嘗試了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 {
\t margin: 0;
\t padding: 0;
}
p {
\t margin: 0 0 1em 0;
\t font-size: 93%;
\t line-height: 1.5em;
}
body {
\t font-family: Helvetica, Arial, sans-serif;
\t padding: 0;
\t margin: 0;
\t background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}
img {
\t max-width: 100%;
\t height: auto;
\t margin: 0 0 10px 0;
}
/* Section Inner */
div.section-inner {
\t max-width: 1100px;
\t padding: 0 25px;
\t margin: 0 auto;
}
/* Header */
div.header {
\t background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
\t margin-top:40px;
\t height: 30px;
\t background-color: #E9E9E9;
\t 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 {
\t /* display none breaks this in some browsers, so just slide it out of view */
\t position:absolute;
\t left:-999em;
}
#mainMenu {
\t position:relative; /* depth sort over h1 */
\t background:#754 url(images/dots.png) top left;
\t padding:0.40em 0.75em 0.05em;
\t /* left margin adjusts for uneven menu width, change as needed */
\t text-align:center;
}
#mainMenu li {
\t list-style:none;
\t display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
\t color:#F0E8E0;
\t text-shadow:
\t \t 0 0 2px #000,
\t \t 2px 2px 2px #000,
\t \t 2px 2px 3px #000;
}
#mainMenu a {
\t display:inline-block;
\t vertical-align:bottom;
\t text-decoration:none;
\t color:#F0E8E0;
\t -webkit-transition:color 0.3s, text-shadow 0.3s;
\t transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
\t color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
\t color:#87C6BC;
}
#mainMenu a:after {
\t display:inline-block;
\t padding:0 0.1em 0 0.5em;
\t color:#FFF;
}
#mainMenu .lastInSet a:after {
\t display:none;
}
#mainMenu .setBreak {
\t padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
\t content:"\2605";
\t font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
\t position:absolute;
\t left:50%;
\t width:3em;
\t bottom: 1em;
}
#mainMenu:after {
\t bottom:0.3em;
\t font-size:150%;
\t margin-left:-1.5em;
}
#mainMenu ul:before {
\t margin-left:-3em;
}
/* Body Content */
div.body-content {
\t padding: 50px 0;
\t background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
\t font-family: Gudea;
}
button {
\t
}
/* Thirds */
div.thirds {
\t padding-bottom: 50px;
\t text-align: center;
\t font-family: Gudea;
}
div.one-third {
\t width: 30%;
\t float: left;
\t margin-right: 5%;
\t text-align: center;
\t font-family: Gudea;
}
div.one-third-last {
\t margin: 0;
\t text-align: center;
\t font-family: Gudea;
}
h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;
}
/* Main Column */
div.main {
\t width: 100%;
\t float: left;
\t margin-top: -30px;
\t margin-right: 5%;
\t text-align: center;
\t padding-bottom:20px;
\t font-family: Gudea;
\t position: relative;
}
/* Footer */
div.footer {
\t background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
\t margin-top: 30px;
\t margin-bottom: 30px;
\t color: #FFF;
\t padding: 15px 0;
\t text-align: center;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/*Mobile Nav*/
@media (min-width:900px) {
\t .header2 {
\t \t display: none;
\t }
\t .menu {
\t \t display: none;
\t }
}
@media (max-width:900px) {
\t body {
\t z-index: 100;
\t margin:;
\t font-family: font:bold 16px/18px arial,helvetica,sans-serif;
\t background-color: #f4f4f4;
\t
\t }
\t a {
\t color: #F8F4E6;
\t text-shadow:
\t \t 0 0 5px #000,
\t \t 5px 5px 5px #754;
\t }
\t .menu a:before,
\t .menu ul:before,
\t .menu ul:before {
\t \t content:"\2605";
\t }
\t /* header */
\t .header2 {
\t background-color:#6A4E39;
\t box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
\t position: relative;
\t width: 100%;
\t z-index: 3;
\t }
\t .header2 ul {
\t margin: 0;
\t padding: 0;
\t list-style: none;
\t overflow: hidden;
\t background-image:none;
\t }
\t .header2 li a {
\t display: block;
\t padding: 20px 20px;
\t border-right: 1px solid #f4f4f4;
\t text-decoration: none;
\t }
\t .header2 li a:hover,
\t .header2 .menu-btn:hover {
\t \t background-color:#4EB4AC;
\t
\t }
\t .header2 .logo {
\t display: block;
\t float: left;
\t font-size: 15px;
\t padding: 10px 20px;
\t margin-top: 15px;
\t text-decoration: none;
\t }
\t /* menu */
\t .header2 .menu {
\t clear: both;
\t max-height: 0;
\t transition: max-height .2s ease-out;
\t
\t }
\t /* menu icon */
\t .header2 .menu-icon {
\t cursor: pointer;
\t display: inline-block;
\t float: right;
\t padding: 28px 20px;
\t position: relative;
\t user-select: none;
\t }
\t .header2 .menu-icon .navicon {
\t background: #F8F4E6;
\t display: block;
\t height: 2px;
\t position: relative;
\t transition: background .2s ease-out;
\t width: 18px;
\t }
\t .header2 .menu-icon .navicon:before,
\t .header2 .menu-icon .navicon:after {
\t background: #F8F4E6;
\t content: '';
\t display: block;
\t height: 100%;
\t position: absolute;
\t transition: all .2s ease-out;
\t width: 100%;
\t margin-top: 7px;
\t }
\t .header2 .menu-icon .navicon:before {
\t top: 03px;
\t }
\t .header2 .menu-icon .navicon:after {
\t top: -2px;
\t }
\t /* menu btn */
\t .header2 .menu-btn {
\t display: none;
\t }
\t .header2 .menu-btn:checked ~ .menu {
\t max-height: none;
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon {
\t background: transparent;
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon:before {
\t transform: rotate(-45deg);
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon:after {
\t transform: rotate(45deg);
\t }
\t .header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
\t .header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
\t top: 0;
\t }
}
/* 48em = 768px */
@media (max-width: 899px) {
#mainMenu {
\t display: none;
\t 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>
\t <meta charset="utf-8">
\t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t
\t <title>Introduction to Responsive Web Design</title>
\t
\t <meta name="viewport" content="width=device-width">
\t
\t <!-- css -->
\t <link rel="stylesheet" href="css/main.css">
\t <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
\t
</head>
<body>
<!--Logo-->
<h1>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h1>
<!--Sawtooth Pattern-->
<h2>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h2>
<!-- Header -->
\t <div class="header"><div class="section-inner">
\t </div></div>
\t
<!-- Navigation -->
<div id="container">
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
\t <ul>
\t \t <li><a href="#" class="current">Home</a></li>
\t \t <li><a href="#">About</a></li>
\t \t <li><a href="#">What We Do</a></li>
\t \t <li class="lastInSet setBreak"><a href="#">Events</a></li>
\t \t
\t \t <li><a href="#">Success Stories</a></li>
\t \t <li><a href="#">Contact</a></li>
\t \t <li><a href="#">Events</a></li>
\t \t <li class="lastInSet"><a href="#">Blog</a></li>
\t </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>
\t
<!-- Body-Content -->
\t <div class="body-content"><div class="section-inner">
\t \t <div class="button">
\t \t \t <img src="http://i63.tinypic.com/2hyxcls.jpg">
\t \t </div>
\t <div class="main">
\t <img src="http://oi63.tinypic.com/14ifsz6.jpg">
\t <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>
\t \t
\t \t <!-- thirds -->
\t \t <div class="thirds clearfix">
\t \t \t
\t \t \t <!-- one-third -->
\t \t \t <div class="one-third mobile-collapse">
\t \t \t \t <img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird on a fence" />
\t \t \t \t <h2>The Trainer</h2>
\t \t \t \t <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>
\t \t \t </div><!--/one-third-->
\t \t \t
\t \t \t <!-- one-third -->
\t \t \t <div class="one-third one-third-second mobile-collapse">
\t \t \t \t <img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird eating" />
\t \t \t \t <h2>Lessons</h2>
\t \t \t \t <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>
\t \t \t </div><!--/one-third-->
\t \t \t
\t \t \t <!-- one-third -->
\t \t \t <div class="one-third one-third-last mobile-collapse">
\t \t \t \t <img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A cat" />
\t \t \t \t <h2>Training</h2>
\t \t \t \t <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>
\t \t \t </div><!--/one-third-->
\t \t \t
\t \t </div><!--/thirds-->
\t \t
\t \t
\t </div></div><!--/body-content-->
<!--Sawtooth Pattern Two-->
<h3>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h3>
\t
<!-- Footer -->
\t <div class="footer"><div class="section-inner">
\t \t
\t \t <p>Footer text placed here.</p>
\t \t
\t </div></div>
</body>
</html>