Question

Chrome开发工具：在其他小元素上使用元素选择工具时，body元素覆盖其他元素。

当我试图检查.h1 div“Ready house projects”文本作为元素时 - 我可以期待只有body元素游标（仅在代码段的右侧部分）。什么使身体元素通过隐藏其他元素以这种方式工作？

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
/*FONTS */
@font-face {
	font-family: 'Beresta';
	src: url('../fonts/Beresta-Normal.eot');
	src: url('../fonts/Beresta-Normal.eot?#iefix') format('embedded-opentype'), url('../fonts/Beresta-Normal.woff') format('woff'), url('../fonts/Beresta-Normal.ttf') format('truetype'), url('../fonts/Beresta-Normal.svg#Beresta-Normal') format('svg');
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'Medieval';
	src: url('../fonts/Medieval-Normal.eot');
	src: url('../fonts/Medieval-Normal.eot?#iefix') format('embedded-opentype'), url('../fonts/Medieval-Normal.woff') format('woff'), url('../fonts/Medieval-Normal.ttf') format('truetype'), url('../fonts/Medieval-Normal.svg#Medieval-Normal') format('svg');
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'Kelsonsans';
	src: url('../fonts/Kelsonsans-Bold.eot');
	src: url('../fonts/Kelsonsans-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Kelsonsans-Bold.woff') format('woff'), url('../fonts/Kelsonsans-Bold.ttf') format('truetype'), url('../fonts/Kelsonsans-Bold.svg#Kelsonsans-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'Opensans';
	src: url('../fonts/Opensans-Regular.eot');
	src: url('../fonts/Opensans-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Opensans-Regular.woff') format('woff'), url('../fonts/Opensans-Regular.ttf') format('truetype'), url('../fonts/Opensans-Regular.svg#Opensans-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'Kelsonsans';
	src: url('../fonts/Kelsonsans-Regular.eot');
	src: url('../fonts/Kelsonsans-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Kelsonsans-Regular.woff') format('woff'), url('../fonts/Kelsonsans-Regular.ttf') format('truetype'), url('../fonts/Kelsonsans-Regular.svg#Kelsonsans-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'Als-Rubl';
	src: url('../fonts/Als-Rubl.eot');
	src: url('../fonts/Als-Rubl.eot?#iefix') format('embedded-opentype'), url('../fonts/Als-Rubl.woff') format('woff'), url('../fonts/Als-Rubl.ttf') format('truetype'), url('../fonts/Als-Rubl.svg#Als-Rubl') format('svg');
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'Verdana-Bold';
	src: url('../fonts/Verdana-Bold.eot');
	src: url('../fonts/Verdana-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Verdana-Bold.woff') format('woff'), url('../fonts/Verdana-Bold.ttf') format('truetype'), url('../fonts/Verdana-Bold.svg#Verdana-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
}

/*END FONTS */
.fluid-container {
	min-width: 1000px;
}
.call_btn{
	vertical-align: top;
	background-color: #f19f00;
	float: right;
	width: 188px;
	height: 39px;
	margin-left: 18px;
	margin-top: 6px;
}
.call_btn:hover{
	text-decoration: none;
}
div.call_btn_sign{
	color: white;
	font-family: Verdana;
	font-size: 16px;
	font-weight: 400;
	border-bottom: 2px dotted white;
	width: 137px;
	display: block;
	margin-left: 25px;
	margin-top: 5px;
}
.container {
	min-width: 1000px;
	max-width: 1200px;
}
.none{
	display: none;
}

/* STRIKETHROUGH */
	.strikethrough {
	  position: relative;
	}
	.strikethrough:before {
	  position: absolute;
	  content: "";
	  left: -4%;
	  top: 40%;
	  right: -4%;
	  border-top: 1px solid;
	  border-color: inherit;
	  color: black;

	  -webkit-transform:rotate(-11deg);
	  -moz-transform:rotate(-11deg);
	  -ms-transform:rotate(-11deg);
	  -o-transform:rotate(-11deg);
	  transform:rotate(-11deg);
}
/* END STRIKETHROUGH  */

/* RUBL */
	span.rubl {
    font-family: 'Als-Rubl'!important;
    text-transform: none;
    font-weight: 100;
}
/* END RUBL */

/* HEADER */
.logo {
	background: url(../images/logo.png) center center no-repeat;
	width: 85px;
	height: 75px;
	display: inline-block;
}
.contacts {
	display: inline-block;
}
.sprite_phone:before {
	background: url(../images/phone_sprite.png) center center no-repeat;
	content: " ";
	height: 20px;
	width: 20px;
	display: inline-block;
	margin: -10px 0 0 -25px;
}
.upper-head {
	display: block;
	height: 115px;
	background-color: white;
}
div.sprite_phone a {
	color: #192d37;
	font-family: "Kelsonsans";
	font-size: 24px;
	font-weight: 700;
	padding-left: 5px;
}
div.email{
	margin-top: 6px;
}
.email a {
	color: #192d37;
	font-family: Verdana;
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
}
.upper-head .container {
	padding-top: 18px;
	margin-bottom: 21px;
}
.left-up-h {
	float: left;
}
.right-up-h {
	float: right;
	margin-top: 18px;
}
.l-u-h_text {
	display: inline-block;
	margin-left: 18px;
}
.h2 {
	font-family: "Beresta";
	color: #192d37;
	font-size: 40px;
	font-weight: 400;
	margin-top: 8px;
	margin-bottom: 8px;
}
.h3 {
	color: #686d6f;
	font-family: "Medieval";
	font-size: 14px;
	font-weight: 400;
	margin-top: 8px;
	margin-bottom: 0px;
}
.header-logo {
	background: url(../images/header_panoram.png) center center no-repeat;
	height: 500px;
	z-index: 1;
	position: relative;
}
.discounts {
	margin-top: 280px;
	color: white;
}
.discounts-box {
	display: block;
	height: 60px;
	border: 4px solid #E9B707;
	font-size: 30px;
	width: 360px;
	text-align: center;
	z-index: 1;
	margin-left: 65px;
	padding-top: 2px;
	border-radius: 2px;
}
.present_sprite_box {
	display: block;
	background-color: #E9B707;
	content: "";
	border-radius: 2px;
	float: left;
	height: 60px;
	width: 60px;
	position: relative;
}
.present_sprite {
	background: url(../images/gift_icon.png) center center no-repeat;
	width: 35px;
	height: 40px;
	position: absolute;
	top: 10px;
	left: 12px;
}
.discounts-box_backgr {
	display: block;
	width: 360px;
	height: 60px;
	background-color: black;
	top: 0px;
	z-index: -1;
	opacity: 0.4;
	margin-left: 65px;
	position: absolute;
	left: 0px;
}
div.discounts-box{
	color:white;
}

	/* GIFT WINDOW */
		div.present_window{
			height:325px;
			width: 550px;
			position:absolute;
			top:-170px;
			background:white url(../images/form_background.png) center bottom no-repeat;
			left:0px;
		}
		div.container_pres{
			margin-left: 30px;
			margin-top: 38px;
			height: 209px;
			width: 490px;
		}
		div.presText{
			width: 488px;
			margin-left: 1px;
		}
		div.presText span{
			font-family: "Kelsonsans";
		}
		div.present_window input[type="text"]{
			width: 268px;
			height: 46px;
			background-color: #fafafa;
			border: 1px solid #c2c2c2;
			box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
			color: #686d6f;
			font-family: "Opensans";
			font-size: 18px;
			font-weight: 400;
			padding-left: 12px;
			display: block;
			float: left;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}

		input.yellow-button{
			font-weight: 400;
			height: 46px;
			width: 220px;
			background-color: #eab600;
			border: none;
			font-family: Verdana;
			font-size: 16px;
			float:right;
			color: #192d37;
			text-decoration: underline;
		}
		.presText h2{
			color: #192d37;
			font-family: "KelsonSans";
			margin-top: 0px;
			font-size: 33px;
			font-weight: 400;
		}
		.presText p{
			font-family: "Verdana";
			font-size: 14px;
			font-weight: 400;
			line-height: 18px;
		}
		p.first_p_text_present{
			color: #686d6f;
			margin-top: 26px;
		}
		p.second_p_text_present{
			color: #192d37;
			margin-top: 18px;
		}
		div.inputboxes_pres{
			margin-top: 31px;
		}
	/* END GIFT WINDOW */

/* END HEADER */

/* HEADER_BOTTOM */
.header-logo_bottom {
	background: url(../images/menu_line.png) center center no-repeat;
	height: 10px;
}

/* END HEADER_BOTTOM */

/* MAIN MENU */
.main_menu {
	background: url(../images/menu_sprite.png) center center no-repeat;
	height: 50px;
	width: auto;
	margin-top: -30px;
	z-index: 1;;
	position: relative;
	text-align: center;
}
.main_menu ol {
	list-style: none;
	padding: 0;
	margin: 0;
}
.main_menu li {
	display: inline-block;
}
.main_menu a {
	font-family: Verdana;
	position: relative;
	color: #ffffff;
	padding: 12px 18px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
}
.main_menu a:hover {
	color: #E9B707;
}
a#to_customer:after{
	content: "";
	background: url(../images/menu_sprite_dropdown.png) center center no-repeat;
	display: block;
	width: 6px;
	height:5px;
	float: right;
	position: absolute;
	left: 111px;
	top: 21px;
}
.to_customer_submenu{
	content: "";
	height: 150px;
	width: 260px;
	position: absolute;
	top: 54px;
	left: 665px;
	text-align: left;
	background: url(../images/dropdown_menu_sprite.png) center center no-repeat;
}
.to_customer_submenu li:first-child a{
	padding:12px 18px;
}
.to_customer_submenu a{
	padding: 9px 18px;
}
/* END MAIN MENU */
/* READY PROJECTS*/
.ready_projects_back{
	width: auto;
	z-index: -1;
	margin-top: -31px;
	position: relative;
	background: url(../images/bg_ready_projects.png);
	height: 738px;

}
.ready_projects_back .h1{
	font-family: KelsonSans;
	font-size: 60px;
	color: #192d37;
	font-weight: 400;
	margin-top: 60px;
	text-align: center;
}
.bold_ready_projects{
	color: #eab600;
	font-weight: 700;
}
.ready_projects_back .h3{
	color: #686d6f;
	font-family: KelsonSans;
	font-size: 24px;
	font-weight: 400;
	text-align: center;
}
.ready_projects_back .proj_box .h3{
	color: #192d37;
	font-family: KelsonSans;
	font-size: 36px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 10px;;	
}
.proj_box{
	background-color: white;
	width: 320px;
	height: 450px;
	
	display: inline-block;
	margin-top: 5px;
	border-radius: 4px;
	position: relative;
}
.discount_proj div.discount_sign{
	position: absolute;	
	background: url(../images/%.png) center center no-repeat;
	margin-left: 15px;
	height: 51px;
	width: 40px;
}
div.proj_box.discount_proj{
	border: 4px solid #eab600;
}
div.proj_box.discount_proj input{
	background-color: #eab600;
	color: black;
}
.project-boxes{
	height: 478px;
	text-align: center;
	background-color: grey;
	margin-top: 30px;
}
div.proj_inbox{;
	display: block;
	margin-top: 16px;;
	margin-left: 18px;;
	margin-right: 18px;;
	position: relative;;
}
.proj_inbox .h5{
	color: #192d37;
	font-family: KelsonSans;
	font-size: 24px;
	font-weight: 400;
	line-height: 35px;
	margin-bottom: 11px;
}
.proj_inbox .h4{
	color: #686d6f;
	font-family: KelsonSans;
	font-size: 18px;
	font-weight: 400;
	margin-top: 15px;
	margin-bottom: -4px;
}
.proj_inbox .h1{
	font-family: KelsonSans;
	font-size: 36px;
	font-weight: 700;
	text-transform: uppercase;

}
.proj_inbox p{
	color: #686d6f;
	font-family: Verdana;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	margin-top: 8px;
}

.proj_inbox p b{
}
.proj_inbox img{
	width: 100%;
}

div.proj_box input{
	text-decoration: none;
	height: 40px;
	width: 100%;
	margin-top: 5px;
	background-color: #192d37;
	color:white;
	border-radius: 2px;
}

.barcode{
    white-space:pre; 
}
.discount_proj .proj_btn_line{
	left: 58px;
	top: 386px;
	border-color: black;
	
}

.proj_btn_line{
	position: absolute;
	content: "";
	border-bottom: 1px solid white;
	width: 160px;
	opacity: 1;
	top:390px;
	left:62px;
	z-index: 1;
}
.line{
	content: "";
	border-bottom: 1px solid black;
	width: 100%;
	opacity: 0.2;
}

/*NAVIGATION*/
	.proj_box_nav{
	text-align: right;

	}
	.go_catalog{
	text-decoration: underline;
	color: #192d37;
	font-family: Verdana;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	text-decoration: underline;
	}
	.catal_arr_left{

	}
	.catal_arr_right{

	}
/*END NAVIGATION*/

/* END READY PROJECTS*/

	
	<body>		
		<!--HEADER-->
		<div class="fluid-container upper-head">
			<div class="container">
				<a href="index.html" class="left-up-h">
					<div class="logo"></div>
					<div class="l-u-h_text">
						<div class="h2">Пестовские срубы</div>
						<div class="h3">У нас всегда хорошие цены!</div>
					</div>
				</a>
				<div class="right-up-h">
					<div class="contacts">
						<div class="sprite_phone"><a>8 (981) 260-50-50</a></div>
						<div class="email"><a href="#">pestovskiesrubi@gmail.com</a></div>
					</div>
					<a href="#" class="call_btn">
						<div class="call_btn_sign">Заказать звонок</div></a>
					</div>
				</div>
			</div>
			<div class="fluid-container header-logo">
				<div class="container">
					<div class="discounts">
						<a href="#">
							<div class="present_sprite_box">
								<div class="present_sprite">
								</div>
								<div class="discounts-box">
									Узнайте о наши акциях
									<div class="discounts-box_backgr"></div>
									<div class="present_window none">
										<div class="container_pres">
											<div class="presText">
												<h2><b>Ваш подарок</b> готов к отправке!</h2>
												<p class="first_p_text_present">Всем, кто заключит договор на строительство дома или бани – индивидуальный подарок.</p>
												<p class="second_p_text_present">Узнайте подробности, оставьте телефон и мы перезвоним вам!</p>
												<div class="inputboxes_pres">
													<input type="text" name="phone_for_gift" placeholder="Ваш телефон"><input type="submit" value="Отправить" class="yellow-button">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="fluid-container header-logo_bottom">
			</div>
			<div class="container main_menu">
				<ol>
					<li><a href="#">Срубы домов</a></li>
					<li><a href="#">Срубы бань</a></li>
					<li><a href="#">Фотогалерея</a></li>
					<li><a href="#">Где строим</a></li>
					<li><a href="#">Контакты</a></li>
					<li><a href="#" id="to_customer">Заказчику</a>
					<div class="to_customer_submenu none">
						<ol>
							<li><a href="#">Способы оплаты</a></li>
							<li><a href="#">Доставка материалов до участка</a></li>
							<li><a href="#">Строительство в кредит</a></li>
						</ol>
					</div>
				</li>
				<li><a href="#">Схема работы</a></li>
			</ol>
		</div>
	</div>
	<!--END HEADER-->
	
	<!--READY PROJECTS BACK-->
	<div class="fluid-container ready_projects_back">
		<div class="container">
			<div class="h1"><span class="bold_ready_projects">Ready</span> house projects</div>
			<div class="h3">Срок постройки по готовому проекту меньше недели!</div>
			<div class="container">
				<div class="project-boxes">
					<div class="proj_box discount_proj">
						<div class="discount_sign"></div>
						<div class="proj_inbox">
							<div class="h5">Проект Д-47</div>
							<img src="images/project_box.png">
							<div class="h4">Цена от: <span class="strikethrough">1 500 000</span></div>
							<div class="h3">1 300 000 <span class="rubl">a</span></div>
							<div class="line"></div>
							<span class="barcode"><p>Площадь: <b>120 м<sup>2</sup>  /</b>   Размер: <b>6х9 м</b></p></span>
							<div class="proj_btn_line"></div>
							<input type="submit" value="Посмотреть проект" class="yellow-button">
						</div>
					</div>
					<div class="proj_box">
						<div class="proj_inbox">
							<div class="h5">Проект Д-47</div>
							<img src="images/project_box.png">
							<div class="h4">Цена от: <span class="strikethrough">1 500 000</span></div>
							<div class="h3">1 300 000 <span class="rubl">a</span></div>
							<div class="line"></div>
							<span class="barcode"><p>Площадь: <b>120 м<sup>2</sup>  /</b>   Размер: <b>6х9 м</b></p></span>
							<div class="proj_btn_line"></div>
							<input type="submit" value="Посмотреть проект" class="yellow-button">	
						</div>
					</div>
					<div class="proj_box">
						<div class="proj_inbox">
							<div class="h5">Проект Д-47</div>
							<img src="images/project_box.png">
							<div class="h4">Цена от: <span class="strikethrough">1 500 000</span></div>
							<div class="h3">1 300 000 <span class="rubl">a</span></div>
							<div class="line"></div>
							<span class="barcode"><p>Площадь: <b>120 м<sup>2</sup>  /</b>   Размер: <b>6х9 м</b></p></span>
							<div class="proj_btn_line"></div>
							<input type="submit" value="Посмотреть проект" class="yellow-button">
						</div>
					</div>
				</div>
				<div class="proj_box_nav">
						<div class="go_catalog">Перейти в каталог</div>
						<div class="catal_arr_left"></div>
						<div class="catal_arr_right"></div>
				</div>
			</div>
		</div>
	</div>
	<!--END READY PROJECTS BACK-->
	<!--PROJECTS_QUALITY-->
	<div class="projecs_quality">
		<div class="h2">Пустовские срубы - качество от производителя</div>
		<div class="achiev_blocks">
			<div class="ach_blk"></div>
			<div class="ach_blk"></div>
			<div class="ach_blk"></div>
		</div>
		<div class="qual_overwrite">Любой здравомыслящий человек мечтает о красивом, уютном доме в живописном местечке за городом, который можно использовать для сезонного или постоянного проживания. Стоит уточнить, что какими бы прекрасными ни были загородные дома на вторичном рынке жилья, они не могут в полной мере соответствовать всем требованиям будущего домовладельца. Заказав строительство деревянных каркасных домов под ключ в Ярославле у нас, Вы станете владельцем идеального строения, которое устроит Вас по всем параметрам. Вы лично сможете выбрать проект будущего дома и, если необходимо, принять непосредственное участие в процессе его корректировки.</div>
		<div class="h2">Как мы строим срубы</div>
		<div class="qual_plan_img"></div>
		<div class="h2">Выгодно для вас</div>
		<div class="benefits_boxes">
			<div class="benefit_box"></div>
			<div class="benefit_box"></div>
			<div class="benefit_box"></div>
		</div>
	</div>
	<!--END PROJECTS QUALITY-->
	
	<!--EASY WORK-->
	<div class="fluid-container easy-work">
		<div class="container">
			<div class="h2">С нами легко работать!</div>
			<div class="easy_boxes">
				<div class="easy_box"></div>
				<div class="easy_box"></div>
				<div class="easy_box"></div>
				<div class="easy_box"></div>
			</div>
			<div class="easy_box"></div>
		</div>
	</div>
	<!--END EASY WORK-->
	<!--FOOTER-->
	<div class="container">
		<div class="footer">
			<div class="footer-1"></div>
			<div class="footer-2"></div>
			<div class="footer-3"></div>
			<div class="footer-4"></div>
		</div>
	</div>
	<!--END FOOTER-->
</body>
</html>

Answer 1

您的z-index: -1课程上有ready_projects_back，这会将div元素推到堆叠中的其他图层下方。 body元素涵盖了整个页面，因此将z-index设置为小于该值的任何内容都将阻止您使用该工具进行检查。

Chrome Dev Tools：使用元素选择工具时，body元素覆盖其他元素

1 个答案: