Иконка вышла за пределы блока и пропала

270

31 марта 2017, 22:18

В шапке есть иконка (картинкой).
После добавление flexbox в шапку проекта она исчезла, я так понял вышла за пределы блока. Но раньше она отображалась за его пределами.

.b-wrap-all { min-height: 100%; overflow:hidden; min-width:1250px; max-width:1450px; margin:0 auto; background:#fff; } 
 
.b-header { height:230px; position:relative;  background:asset-url("x11.png", images) repeat-x; z-index:101;  } 
 
.flex { display: flex; flex-direction: row; justify-content: space-around; align-items: center; } 
 
 
.b-top-basket { right:24px; top:24px; color:#fff; font-size:12px; line-height:14px; } 
.b-top-basket a { color:#fff; font-size:13px; text-decoration:none; } 
.b-top-basket a:hover { text-decoration:underline; } 
.b-top-basket a:first-child { font-size:11px; } 
.b-top-basket:before { content:''; width:23px; height:18px; background:asset-url("i-bask.png", images) no-repeat; left:-36px; top:16px; position:absolute; } 
.b-top-basket-full:after { content:''; width:16px; height:15px; background:asset-url("i-bask-full.png", images) no-repeat; left:-30px; top:2px; position:absolute; }

<div class="b-wrap-all"> 
  <div class="b-header"> 
    <div class="flex"> 
      <div class="logo"></div> 
      <div class="address"></div> 
      <div class="form"></div> 
      <div class="basket"> 
        <div class="b-top-basket"></div> 
      </div> 
    </div> 
  </div> 
 </div>

Добавляю overflow:visible; не помогает. Убираю left:-36px; top:16px; и она появляется в левом верхнем углу блока.

Что можно сделать чтобы иконка отображалась?

UPD: Иконка (::before) переместилась в левый край экрана. получается она правильно съехала вниз и влево, но только не от блока b-top-basket, а от всего b-header

Answer 1

У Вас у иконки абсолютное позиционирование, но у родителя ни у .b-top-basket, ни у .basket не задан position: relative, поэтому иконка позиционируется относительно окна браузера. + у обертки четкие границы с overflow: hidden.

Решение - задать .b-top-basket или .basket position: relative:

.b-wrap-all { min-height: 100%; overflow:hidden; min-width:1250px; max-width:1450px; margin:0 auto; background:#fff; } 
 
.b-header { height:230px; position:relative;  background:asset-url("x11.png", images) repeat-x; z-index:101;  } 
 
.flex { display: flex; flex-direction: row; justify-content: space-around; align-items: center; } 
 
 
.b-top-basket { right:24px; top:24px; color:#fff; font-size:12px; line-height:14px; } 
.b-top-basket a { color:#fff; font-size:13px; text-decoration:none; } 
.b-top-basket a:hover { text-decoration:underline; } 
.b-top-basket a:first-child { font-size:11px; } 
.b-top-basket:before { content:''; width:23px; height:18px; background:asset-url("i-bask.png", images) no-repeat; left:-36px; top:16px; position:absolute; } 
.b-top-basket-full:after { content:''; width:16px; height:15px; background:asset-url("i-bask-full.png", images) no-repeat; left:-30px; top:2px; position:absolute; } 
 
/* мои стили только для наглядности примера  */ 
.logo, 
.adress, 
.form, 
.basket { 
height: 100px; 
width: 20%; 
background: #ddd; 
} 
 
/* Решение:  */ 
.basket { 
position: relative; 
}

<div class="b-wrap-all"> 
  <div class="b-header"> 
    <div class="flex"> 
      <div class="logo"></div> 
      <div class="address"></div> 
      <div class="form"></div> 
      <div class="basket"> 
        <div class="b-top-basket"></div> 
      </div> 
    </div> 
  </div> 
 </div>