Bootstrap сухари над верхней части изображения

Question

Доброе утро, я создающих передний конец нашего сайта портфолио, и мне нужно немного помочь (в голове не укладывается =))

Проблема заключается в том: Мне нужно разработать заголовок с а сухари и изображение

Я знаю, что родительский класс на изображении должны быть иметь position: relative и детская (хлебную крошку) position: absolute но не помогает :(

мой код: http://codepen.io/Yummy9522/pen/aBMKea

P.S. Иерархическая должен быть в контейнер вроде как «как» и «вид»

Answer 1

я есть удалить некоторые стили и добавить новые свойства изменить CSS, как таким образом, вы должны установить bottom:0; к этому .ag_portfolio_inform_2 класса и width:100%;

.ag_portfolio_logo { 
 
\t position: relative; 
 
} 
 
.ag_portfolio_logo img { 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 
.ag_portfolio_inform_2 { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t width:100%; 
 
} 
 
.ag_portfolio_inform_2 > .container { 
 
\t position: relative; 
 
} 
 
.ag_portfolio_inform { 
 

 
} 
 
.ag_portfolio_inform .breadcrumb { 
 
\t padding: 8px 15px 8px 0; 
 
\t border-radius: 0; 
 
\t background-color: transparent; 
 

 
} 
 
.ag_portfolio_inform .breadcrumb li a { 
 
\t font-size: 15px; 
 
\t color: #000; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="ag_portfolio_logo"> 
 
     <img src="http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg" alt=""> 
 
     <div class="ag_portfolio_inform_2"> 
 
      <div class="container"> 
 
      <div class="ag_portfolio_inform"> 
 
       <ol class="breadcrumb"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">Portfolio</a></li> 
 
       <li class="active">Globuz</li> 
 
       </ol> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>

Answer 2

попробовать с этим CSS

.ag_portfolio_inform { 
 
    position: absolute; 
 
    top: 165px !important; /* give custom height */ 
 
    left: 100px; 
 
} 
 
.ag_portfolio_inform_2{ 
 
    width: 100%; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="ag_portfolio_logo"> 
 
     <img src="http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg" alt=""> 
 
     <div class="ag_portfolio_inform_2"> 
 
      <div class="container"> 
 
      <div class="ag_portfolio_inform"> 
 
       <ol class="breadcrumb"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">Portfolio</a></li> 
 
       <li class="active">Globuz</li> 
 
       </ol> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>

Answer 3

ПРИЧИНА НЕ РАБОТАЮ

Позвольте мне пояснить, почему ваш код не работает. Вы используете .ag_portfolio_inform и .ag_portfolio_inform2, которые в настоящее время связаны. Вам необходимо удалить абсолютное значение с .ag_portfolio_inform и использовать значения на .ag_portfolio_inform2 или наоборот.

Просто удалите абсолютное позиционирование из .ag_portfolio_inform2, а затем вы можете использовать свойства .ag_portfolio_inform the, как вам нравится.

Надеюсь, это поможет.

Answer 4

ИМО - вы не собираетесь это делать самым умным способом.

Следует использовать абсолютное позиционирование, но я не думаю, что это один из них. Вы пытаетесь использовать элемент изображения в качестве фонового изображения. This answer должен дать вам некоторое представление - в частности, № 6 о том, когда использовать CSS в вашем случае.

Хотя то, что вы делаете, является одним из способов сделать это, имеет смысл использовать обычный div с фоновым изображением в качестве атрибута CSS. Затем вы можете выровнять панировочные сундуки так же, как и в любом другом месте, и не нужно беспокоиться об абсолютном расположении, которое всегда может повредить вещи по дороге.

Попробуйте что-то вроде этого:

HTML

<div class="background-image"> 
    <div class="container"> 
     <ol class="breadcrumb"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li class="active">Globuz</li> 
     </ol> 
    </div> 
</div> 

CSS

.background-image { 
    background-image: url("http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg"); 
    background-size: cover; 
    background-position: center; 
} 
.breadcrumb { 
    border-radius: 0; 
    background-color: transparent; 
    padding: 15px 0 10% 0; 

} 
.breadcrumb li a { 
    font-size: 15px; 
    color: white; 
}