元素隐藏在另一个元素下

时间：2016-04-16 22:02:25

标签： html css

我需要一些我正在建设的网站的帮助。我是网页设计的新手，所以我对这个问题非常困惑。你看我在标题的顶部有一个锯齿形图案，如下所示：The effect I want

问题是，我的锯齿模式试图隐藏在蓝色标题后面。我不能为我的生活找出原因！ （请原谅锯齿模式中的错误，我需要解决这个问题。）

的CSS：

＆＃13;
＆＃13; 
/* 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{
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

body {
	padding-top:2em;
	font:normal 100%/150% "segoe ui",helvetica,sans-serif;
	background:#642 url(http://oi68.tinypic.com/x42exd.jpg);
	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 {
	position:relative;
	z-index: 7;
	font:bold 40px/42px arial,helvetica,sans-serif;
	background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png) bottom left repeat-x;
	text-align:center;
	margin-top:20px;
	
}


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

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

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

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

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

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

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

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

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

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

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


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

	
	}
}


/**MENU**/

@media (min-width:52em) {

	.header {
		display: none;
	}

	.menu {
		display: none;
	}


}

@media (max-width:52em) {

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

	}

	a {
	  color: #F8F4E6;
	}

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

	}


	/* header */

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


	}

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

	}

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

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

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

	/* menu */

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

	/* menu icon */

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

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

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

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

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

	/* menu btn */

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

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

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

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

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

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

/* 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 {
  	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%;
  }
}
＆＃13; 
<!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>
	<a href="/">
		Sandmann Farm
		<span>-</span>
		<small>EST. 1975</small>
	</a>
</h1>
<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>

<!-- #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>
＆＃13;
＆＃13;
＆＃13;

提前致谢！

1 个答案:

答案 0 :(得分：0)

在回答之前，我需要写一个重要的事情：以正确的方式写下你的问题并使用MCVE。

Okey，现在是答案。

  1. 从background中的a移除h1媒体资源。

  2. 完全删除#header2（除非您将整个标题移到那里，否则不会使用它。）

  3. 使用此CSS设置h1的背景（您可以将其余规则放入其中）：

    4. 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;
}

    在这里，您可以了解有关多个背景的更多信息：W3Schools。

相关问题
最新问题