要素が別の要素の下に隠されている

Question

私が構築しているウェブサイトで助けが必要です。私はウェブデザインに新しいので、私はかなりこの問題と混同しています。あなたは私が次のようなヘッダーの上に欲しい鋸歯模様を持っているのを見ています。The effect I want

問題は、私の鋸歯模様が青いヘッダーの後ろに隠ろうとしています。なぜ私は私の人生のために理解することはできません！ （鋸歯状のパターンで間違いすみません、私はそれを修正する必要があります。）

のCss：事前に

/* null margins and padding to give good cross-browser baseline */ 
 
html,body,address,blockquote,div, 
 
form,fieldset,caption, 
 
h1,h2,h3,h4,h5,h6, 
 
hr,ul,li,ol,ul, 
 
table,tr,td,th,p,img{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
img, fieldset { 
 
\t border:none; 
 
} 
 

 
body { 
 
\t padding-top:2em; 
 
\t font:normal 100%/150% "segoe ui",helvetica,sans-serif; 
 
\t background:#642 url(http://oi68.tinypic.com/x42exd.jpg); 
 
\t color:#FFF; 
 
} 
 

 

 
#header2 { 
 
    
 
    
 
background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zpscwam4jrq.png); 
 
    
 
height: 20px; 
 
    
 
width: 100%; 
 
    
 
top: 0px; 
 
    
 
font-size: 90px; 
 
    
 
font-weight: bold; 
 
    
 
color: #FFF; 
 
    
 
text-align: center; 
 
    
 
padding-top: 0px; 
 

 
position:absolute; 
 

 
} 
 

 
h1 { 
 
\t position:relative; 
 
\t z-index: 7; 
 
\t font:bold 40px/42px arial,helvetica,sans-serif; 
 
\t background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png) bottom left repeat-x; 
 
\t text-align:center; 
 
\t margin-top:20px; 
 
\t 
 
} 
 

 

 
h1 a { 
 
\t position:relative; 
 
\t zoom:1; /* trip haslayout, fix legacy IE bugs */ 
 
\t display:block; 
 
\t padding:30px 0; 
 
\t text-transform:uppercase; 
 
\t background:url(http://oi67.tinypic.com/33dfi86.jpg) bottom left; 
 
\t color:#FFF; 
 
\t text-decoration:none; 
 
\t text-shadow: 
 
\t \t 0 0 2px #000, 
 
\t \t 2px 2px 3px #754; 
 
} 
 

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

 
h1 small { 
 
\t display:block; 
 
\t font:bold 16px/18px arial,helvetica,sans-serif; 
 
} 
 

 
#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.75em 0 0.75em 0.75em; 
 
\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 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:#AEF; 
 
} 
 

 
#mainMenu a:active, 
 
#mainMenu a:focus, 
 
#mainMenu a:hover { 
 
\t color:#0FF; 
 
} 
 

 
#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:0.65em; 
 
} 
 

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

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

 
@media (min-width:1px) { /* sneaky trick to target just CSS3 browsers */ 
 
/* 
 
\t h1 span { 
 
\t \t background:url(images/h1Logo2x.png); 
 
\t \t background-size:cover; 
 
\t } 
 
\t uncomment for 2x resolution logo support 
 
*/ 
 
} 
 

 
@media (max-width:50em) { 
 
\t #mainMenu { 
 
\t \t padding:1em 0 0.5em; 
 
\t } 
 
\t #mainMenu ul { 
 
\t \t max-width:25em; 
 
\t \t margin:0 auto; 
 
\t } 
 
\t #mainMenu .setBreak { 
 
\t \t padding-right:0; 
 
\t } 
 
\t /* 
 
\t \t restyle menu to 'mobile friendly' finger-sized targets 
 
\t */ 
 
\t #mainMenu:after, 
 
\t #mainMenu a:after, 
 
\t #mainMenu ul:before, 
 
\t #mainMenu ul:after { 
 
\t \t 
 
\t } 
 
\t #mainMenu a { 
 
\t \t padding:0.5em 1em; 
 
\t \t margin:0 0.15em 0.5em; 
 
\t \t background:rgba(0,0,0,0.3); 
 
\t \t -webkit-border-radius:1em; 
 
\t \t border-radius:1em; 
 
\t } 
 
} 
 

 
@media (max-width:26em) { 
 
\t body { 
 
\t \t padding-top:0; 
 
\t } 
 
\t h1 { 
 
\t \t text-align:left; 
 
\t \t font:bold 150%/120% arial,helvetica,sans-serif; 
 
\t \t 
 
\t } 
 
\t h1 a { 
 
\t \t padding:0.25em 3em 0.25em 0.25em; 
 
\t \t 
 
\t } 
 
\t h1 small { 
 
\t \t font:bold 80%/120% "segoe ui",arial,helvetica,sans-serif; 
 
\t \t padding-bottom:15px; 
 
\t \t 
 
\t } 
 
\t h1 span, 
 
\t #mainMenu:before { 
 
\t \t display:none; 
 
\t } 
 
\t #mainMenuCheck + label { 
 
\t \t position:absolute; 
 
\t \t z-index:99; 
 
\t \t right:0.25em; 
 
\t \t top:0.3em; 
 
\t \t width:3em; 
 
\t \t padding:0.5em 0; 
 
\t \t background:#488; 
 
\t \t border:0.25em solid #FFF; 
 
\t \t -webkit-border-radius:0.75em; 
 
\t \t border-radius:0.75em; 
 
\t \t display:none; 
 
\t } 
 
\t #mainMenuCheck + label:hover { 
 
\t \t background:#6BB; 
 
\t \t display: none; 
 
\t } 
 
\t #mainMenuCheck + label:before, 
 
\t #mainMenuCheck + label:after { 
 
\t \t content:""; 
 
\t \t display:block; 
 
\t \t height:0.5em; 
 
\t \t margin:0 0.5em; 
 
\t \t border:solid #FFF; 
 
\t \t border-width:0.25em 0; 
 

 

 
\t } 
 
\t #mainMenuCheck + label:after { 
 
\t \t border-width:0 0 0.25em; 
 
\t \t 
 
\t } 
 
\t #mainMenu { 
 
\t \t display:none; 
 
\t \t padding:0.5em 0.5em 0; 
 
\t } 
 
\t #mainMenuCheck:checked ~ #mainMenu { 
 
\t \t display:block; 
 

 
\t 
 
\t } 
 
} 
 

 

 
/**MENU**/ 
 

 
@media (min-width:52em) { 
 

 
\t .header { 
 
\t \t display: none; 
 
\t } 
 

 
\t .menu { 
 
\t \t display: none; 
 
\t } 
 

 

 
} 
 

 
@media (max-width:52em) { 
 

 
\t body { 
 
\t margin:; 
 
\t font-family: font:bold 16px/18px arial,helvetica,sans-serif; 
 
\t background-color: #f4f4f4; 
 
\t text-shadow: 
 
\t \t 0 0 5px #000, 
 
\t \t 5px 5px 5px #754; 
 

 
\t } 
 

 
\t a { 
 
\t color: #F8F4E6; 
 
\t } 
 

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

 
\t } 
 

 

 
\t /* header */ 
 

 
\t .header { 
 
\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 .header ul { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
\t overflow: hidden; 
 
\t background-image:none; 
 

 
\t } 
 

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

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

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

 
\t /* menu */ 
 

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

 
\t /* menu icon */ 
 

 
\t .header .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 .header .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 .header .menu-icon .navicon:before, 
 
\t .header .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 } 
 

 
\t .header .menu-icon .navicon:before { 
 
\t top: 5px; 
 
\t } 
 

 
\t .header .menu-icon .navicon:after { 
 
\t top: -5px; 
 
\t } 
 

 
\t /* menu btn */ 
 

 
\t .header .menu-btn { 
 
\t display: none; 
 
\t } 
 

 
\t .header .menu-btn:checked ~ .menu { 
 
\t max-height: none; 
 
\t } 
 

 
\t .header .menu-btn:checked ~ .menu-icon .navicon { 
 
\t background: transparent; 
 
\t } 
 

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

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

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

 
/* 48em = 768px */ 
 

 
@media (min-width: 52em) { 
 
    .header li { 
 
    float: left; 
 
    
 
    } 
 
    .header li a { 
 
    padding: 20px 30px; 
 
    } 
 
    .header .menu { 
 
    clear: none; 
 
    float: right; 
 
    max-height: none; 
 
    } 
 
    .header .menu-icon { 
 
    display: none; 
 
    } 
 
} 
 

 
@media (max-width: 52em) { 
 
    #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><meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> 
 
<link rel="stylesheet" href="screen.css" media="screen,projection,tv"> 
 
<title>Sandmann Farm</title> 
 
</head><body> 
 

 

 
<div id="header2"></div><!--end of header --> 
 
    
 
</div><!--end of container --> 
 

 
<h1> 
 
\t <a href="/"> 
 
\t \t Sandmann Farm 
 
\t \t <span>-</span> 
 
\t \t <small>EST. 1975</small> 
 
\t </a> 
 
</h1> 
 
<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> 
 

 
<!-- #mainMenu --></div> 
 

 

 
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" /> 
 
<header class="header"> 
 
    <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> 
 

 

 
<img src="https://41.media.tumblr.com/a084ee9dfc98ea3b1243a27c35c87e65/tumblr_mmxchsAxbB1rbpdkgo1_500.jpg"> 
 

 

 

 
</body></html>

ありがとう！

Answer 1

答えの前に私は重要なことを書く必要があります：質問を正しい方法で書いて、MCVEを使用してください。

Okey、今や答え。

1. h1でのごaからbackgroundプロパティを削除します。

2. 完全に削除してください#header2（ヘッダ全体を移動しない限り使用されません）。 W3Schools：ここでは、複数の背景についての詳細を学ぶことができ

h1 { 
    background-image: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png), url(http://oi67.tinypic.com/33dfi86.jpg); 
    background-repeat: repeat-x, repeat; 
    background-position: bottom left, bottom left; 
} 

：h1の背景を（あなたはそれにあなたのルールの残りの部分を置くことができる）を設定する

使用このCSS。