Chrome 开发工具：使用元素选择工具时，正文元素会覆盖其他元素
Chrome Dev Tools: body element cover others when using elements selection tool
Chrome 开发工具：在其他小元素上使用元素选择工具时，主体元素会覆盖其他元素。
当我尝试检查 .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>
您的 ready_projects_back class 上有 z-index: -1，这会将 div 元素推到堆栈中其他层的下方。 body 元素覆盖了整个页面，因此将 z-index 设置为低于该值的任何值，将阻止您使用该工具检查它。
Chrome 开发工具：在其他小元素上使用元素选择工具时，主体元素会覆盖其他元素。
当我尝试检查 .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>
您的 ready_projects_back class 上有 z-index: -1，这会将 div 元素推到堆栈中其他层的下方。 body 元素覆盖了整个页面，因此将 z-index 设置为低于该值的任何值，将阻止您使用该工具检查它。