Bootstrap Paniermehl über oberen Rand des Bildes

Question

Guten Morgen, ich creat unserer Website Portfolio Front-End und ich brauche ein wenig Hilfe (in der Kopf nicht passt =))

Das Problem ist: Ich brauche Header entwickeln mit ein Paniermehl und Bild

ich wissen übergeordnete Klasse auf dem Bild position: relative und Kinder (Brotkrümel) haben muss position: absolute aber :(

meinen Code nicht helfen: http://codepen.io/Yummy9522/pen/aBMKea

P.S. Brotkrumen muss in den Behälter sein wie als ‚wie‘ und ‚Ansichten‘

Answer 1

Ich habe einige Arten entfernen und fügen Sie neue Eigenschaften Ihre css wie auf diese Weise ändern, Sie bottom:0; dieser .ag_portfolio_inform_2 Klasse und width:100%;

gesetzt haben

.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

versuchen mit diesem 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

Grund für die nicht ARBEITS

Lassen Sie mich erklären, warum Ihr Code nicht funktioniert. Sie verwenden .ag_portfolio_inform und .ag_portfolio_inform2, die derzeit verknüpft sind. Sie müssen absolut aus dem .ag_portfolio_inform entfernen und die Werte auf .ag_portfolio_inform2 oder umgekehrt verwenden.

Entfernen Sie einfach die absolute Positionierung aus dem .ag_portfolio_inform2 und dann können Sie die Eigenschaften von .ag_portfolio_inform the wie Sie möchten verwenden.

Hoffe, das hilft.

Answer 4

IMO - Sie gehen hier nicht auf die klügste Art und Weise.

Es gibt Zeiten, in denen Sie absolute Positionierung verwenden sollten, aber ich denke nicht, dass dies einer von ihnen ist. Sie versuchen, ein Bildelement als Hintergrundbild zu verwenden. This answer sollte Ihnen einige Einblicke geben - speziell # 6 von wann CSS in Ihrem Fall zu verwenden.

Während Sie eine Methode verwenden, ist es sinnvoller, ein reguläres div mit einem Hintergrundbild als CSS-Attribut zu verwenden. Sie können dann die Paniermehl so ausrichten, wie Sie es sonstwo tun würden und müssen sich keine Sorgen über die absolute Positionierung machen, die immer Dinge auf dem Weg durcheinander bringen kann.

so etwas wie dieses Versuchen:

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; 
}