为什么我的元素在他们的容器之外？

Question

我不明白为什么我的元素（标志，菜单，信息框）在淡灰色的容器之外。你可以帮帮我吗？非常感谢

参见：http://jsfiddle.net/vqoudo6d/3/

HTML：

<header class="header"> 
    <div class="header-wrapper"> 
     <img class="header-logo" src="http://lorempixel.com/output/fashion-q-g-284-119-5.jpg"> 
     <nav class="header_nav"> 
      <ul class="header_nav-wrapper"> 
       <li class="header_nav-item"> <a id="aboutOpen" class="header_nav-item-a" href="jkk">l'Atelier</a> 

       </li> 
       <li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">La Carte des soins</a> 

       </li> 
       <li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">Contact</a> 

       </li> 
      </ul> 
     </nav> 
    </div> 
    <div class="infos-pratiques clearfix"> 
     <p class="info-pratiques-tag">Informations pratiques</p> 
     <div class="info-pratiques-content"> 
      <p>3 rue dfdsf 
       <br>sdsqdssdd</p> 
      <p>Lundi: 
       <br>Mardi: 
       <br>Mercredi: 
       <br>Jeudi</p> 
     </div> 
    </div> 
</header> 
<div class="slider"> 
    <ul class="slider__wrapper"> 
     <li class="slider__item"> 
      <div class="box" style="background-image:url(images/test.jpg);background-size: cover; 
    background-repeat: no-repeat; background-position: 50% 50%;"></div> 
     </li> 
     <li class="slider__item"> 
      <div class="box" style="background-image:url(images/test2.jpg);background-size: cover; 
    background-repeat: no-repeat; background-position: 50% 50%;"></div> 
     </li> 
    </ul> 
</div> 

CSS：

.slider { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 90%; 
    height: 550px; 
    background: #eee; 
    overflow: hidden; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5); 
    max-width: 1200px; 
} 
.slider__wrapper { 
    height: 100%; 
    list-style: none; 
    overflow: hidden; 
    *zoom: 1; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform-style: preserve-3d; 
} 
.slider__item { 
    height: 100%; 
    float: left; 
    clear: none; 
} 
.slider__arrows-item { 
    position: absolute; 
    display: block; 
    margin-bottom: -20px; 
    padding: 20px; 
} 
.slider__arrows-item--right { 
    bottom: 50%; 
    right: 30px; 
} 
.slider__arrows-item--left { 
    bottom: 50%; 
    left: 30px; 
} 
.slider__nav { 
    position: absolute; 
    bottom: 30px; 
} 
.slider__nav-item { 
    width: 12px; 
    height: 12px; 
    float: left; 
    clear: none; 
    display: block; 
    margin: 0 5px; 
    background: #fff; 
} 
.slider__nav-item--current { 
    background: #ccc; 
} 
.slider__nav-item:hover { 
    background: #ccc; 
} 
.box { 
    width: 100%; 
    height: 100%; 
} 
.header { 
    z-index: 999; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
} 
.header-wrapper { 
    padding: 54px 60px; 
} 
.header-logo { 
    float: left; 
    clear: none; 
} 
.header_nav { 
    float: right; 
    clear: none; 
    font-family:'Maven Pro', sans-serif; 
    font-weight: normal; 
} 
.header_nav-wrapper { 
    list-style: none; 
} 
.header_nav-item { 
    margin-left: 22px; 
    float: left; 
    clear: none; 
} 
.header_nav-item-a { 
    color: #474032; 
    text-decoration: none; 
} 
.header_nav-item-a:hover { 
    color: #eee; 
} 
.header_nav-item-a--btn { 
    padding: 16px 18px; 
    border-radius: 5px; 
    border: 1px solid #474032; 
    background-color: transparent; 
} 
.header_nav-item-a--donate { 
    margin-top: -18px; 
} 
.header_nav-item-a--btn:hover { 
    border: 1px solid #eee; 
} 


    .info-pratiques-content { 
     float: left; 
     clear: both; 
     margin-top: 14px; 
     margin-left: 4.52489%; 
     font-size: 13px; 
     line-height: 1.38; 
     color: #433d2b; 
    } 
    .info-pratiques-content p { 
     margin-bottom: 1em; 
    } 
    .info-pratiques-tag { 
     margin-top: 14px; 
     margin-right: auto; 
     margin-left: auto; 
     padding-top: 2px; 
     padding-right: 2px; 
     padding-bottom: 2px; 
     padding-left: 2px; 
     background-color: #9d926a; 
     font-size: 13px; 
     font-weight: 400; 
     line-height: 1.38; 
     text-align: center; 
     text-transform: uppercase; 
     color: rgb(65, 61, 45); 
    } 
    .infos-pratiques { 
     position: absolute; 
     top: 217px; 
     right: 5.1984375%; 
     z-index: 26; 
     width: 221px; 
     height: 200px; 
     background-color: rgb(222, 222, 222); 
     opacity: 0.91; 
    } 

Answer 1

的max-width和background都在.slider，但你的头不在里面。只需将背景和最大宽度添加到正文，一切都应该很好。

另外请记住，绝对定位的元素总是相对于最接近的非静态元素（position: fixed, relative, absolute）。

编辑：我也同意Paulie_D的评论，尽量减少绝对定位