0
내 기술을 테스트하기위한 레이아웃을 만들고 있습니다.레이아웃 이해
막대를 만들었지 만 (이미지 참조) 카드 divs (400x200 이미지)로 겹칩니다. 양식의 일부 요소 (바 div)는 페이지의 맨 아래에 있어야하지만 색칠 된 막대는 틀린 위치에 배치됩니다. 눈으로 결과와 코드를 볼 수 있습니다. 연락하고자하는 결과의 사진을 첨부했습니다.
원하지 않는 결과 : 
$(function(){
var $buttonNav = $('.header__icon-bar');
var degree = 45;
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
$buttonNav.toggleClass('animate');
if($('.header__nav').hasClass('is-open')){
$('.header__icon-bar').css('transform','rotate(90deg)')
}else{
$('.header__icon-bar').css('transform','rotate(0deg)')
}
});//end of click event
});//end of $(document).ready()/*----------
GENERAL
-----------*/
html,body{ width: 100%; margin: 0; padding: 0; }
body{ background: #eee; }
.animate{
-webkit-trasform: rotate(90deg);
-ms-trasform: rotate(90deg);
trasform: rotate(90deg);
}
/*----------
HEADER
-----------*/
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px; position: relative; z-index: 100;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none; text-transform: uppercase; }
.header__nav__item a:hover { background: #ff3333; }
/*----------
cover
-----------*/
.cover{ background-color: #333; height: 80% ; width: 100%;position: relative; margin-top: 90px; padding: 30px;}
.cover__text { color: white; width: 95%; position: relative; left: 40px; }
.cover__text p{ color: #999999; font-size: 20px; }
.line-through{padding: 1px; width: 750px; height: 1px; background-color: #e6ccb3; display: table; margin: 0 auto; z-index: 30px;}
.cover__image{ margin: 0; padding: 0; float: left; z-index: 3; width: 600px; height: 400px; z-index: 20; background-image: url(http://www.dejana.com/wp-content/uploads/2014/08/550x370.png);
background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-position: center; }
.cover__button { margin: 0 auto; display: table; padding: 20px}
.cover__button a{ padding: 20px; background-color: #ff3333;border-radius: 5px; text-decoration: none; color: black; font-weight: bold;}
.cover__button a:hover{ background: #eee; color: #ff3333; }
/* HIDING OVERFLOW ELEMENTS
html,body{overflow-x: hidden;}
*/
/*---------
CARD
----------*/
.card{ position: relative; margin-top: 30px; max-width: 1440px;}
.card__img {float: right; margin: 20px 10px; width: 400px; height: 200px}
.card__img:hover{opacity: 0.5}
/*----------
ICON-BAR
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}
/*----------
ICON-BAR
-----------*/
.bar{ background-color: #333; height: 50px; border: 1px red solid; margin:0; padding: 0}
/*----------
SMARTPHONE
-----------*/
@media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; }
.header__nav__item { display: block; padding: 20px; margin: 0; position: relative;}
.header__nav__item a{ width: 100%;padding-right: 100%;}
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}
/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left; position: absolute;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}
/*cover*/
.cover{ height: auto; padding: 10px; margin-top: 30px; width: 100%}
.cover__image{ padding: 0; margin: 0; width: 97%; height: 400px; display: block; }
.cover__text{ margin: 0; left: 0; top: 20px; padding: 10px; width: 100%; display: block; overflow-y: scroll;}
.cover__text p {font-size: 16px}
.line-through{ width: 90%}
.cover__button { margin-top: 15px; position: relative; margin-bottom: 10px;}
.cover__button a{ padding: 10px; font-size: 15px;}
/*cards*/
.card{ margin-top: 50px }
.card__img{ margin: 0 ; padding: 10px 20px; }
}/*END OF @font-face */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
<div class="header__background">
<a class="header__icon-bar animate" href="">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="header__nav">
<li class="header__nav__item"> <a href="#"> Home </a> </li>
<li class="header__nav__item"> <a href="#"> Contact </a> </li>
<li class="header__nav__item"> <a href="#"> Apply </a> </li>
<li class="header__nav__item"> <a href="#"> About </a> </li>
</ul>
</header>
<div class="cover">
<div class="cover__image"></div>
<div class="cover__text">
<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>
<span class="line-through"></span>
<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>
<div class="cover__button"><a href=""> Buy a New Course</a></div>
</div>
<section class="card">
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
</section>
<section class="card">
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
</section>
<div class="bar ">
<form action="" method="get">
<label for="email">Email</label><input type="email" name="email" value="[email protected]">
<input type="submit" value="Iscriviti"/>
</form>
</div>