Element auf anderen Element und unten fixiert

Question

Ich möchte div mit Bild und auf diesem zweiten div mit Namen des Bildes haben.

Wenn ich lange lorem ipsum in p Element eingeben, Elternteil div macht größer, aber ich möchte Größe des Elternteil div halten und einfach größer Element mit Namen.

Wie geht das?

Ich möchte etwas wie folgt aus:

Mein Code:

<div class="item-slot"> 
    <img src="http://cdn.steamcommunity.com/economy/image/something_here"> 
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> 
</div> 

CSS:

.item-slot { 
width:100px; 
height:100px; 
background:rgba(20, 25, 9, 0.5); 
border:1px solid #364500; 
padding-top:5px; 
display:inline-block; 
margin-bottom:4px; 
text-align:center; 
} 
.item-slot>p { 
background-color:red; 
text-align:center; 
font-size:10px; 
z-index:100000; 
} 
.item-slot>img { 
top:20px; 
width:85px; 
height:66px; 
} 

Answer 1

So wie diese? https://jsfiddle.net/2xqrqmfz/

Ich habe die relative Positionierung zum .item-Slot und die absolute Positionierung zum p-Tag hinzugefügt. Vielleicht möchten Sie den p-Tag für etwas passenderes auslagern, da es kein Absatz ist. Ich würde wahrscheinlich ein anderes div verwenden.

.item-slot { 
 
width:100px; 
 
height:100px; 
 
background:rgba(20, 25, 9, 0.5); 
 
border:1px solid #364500; 
 
padding-top:5px; 
 
display:inline-block; 
 
margin-bottom:4px; 
 
text-align:center; 
 
position:relative; 
 
} 
 
.item-slot>p { 
 
    position:absolute; 
 
    bottom: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
background-color:red; 
 
text-align:center; 
 
font-size:10px; 
 
z-index:100000; 
 
} 
 
.item-slot>img { 
 
top:20px; 
 
width:85px; 
 
height:66px; 
 
}

<div class="item-slot"> 
 
    <img src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsRVx4MwFo5_T3eAQ3i6DMIW0X7ojiwoHax6egMOKGxj4G68Nz3-jCp4itjFWx-ktqfSmtcwqVx6sT/360fx360f"> 
 
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> 
 
</div>

bearbeiten, fügte ein paar Notizen.

Answer 2

Ich denke, dass Sie möchten, dass der Absatz auf Schweben erweitern und es innerhalb der div für diese können Sie overflow:hidden; in der Klasse .item-slot und dann auf Hover-Effekt von p können Sie den oberen Rand verringern. Hier

ist der Code:

.item-slot { 
 
width:100px; 
 
height:100px; 
 
background:rgba(20, 25, 9, 0.5); 
 
border:1px solid #364500; 
 
padding-top:5px; 
 
display:inline-block; 
 
margin-bottom:4px; 
 
text-align:center; 
 
overflow: hidden; 
 
} 
 
.item-slot>p { 
 
background-color:red; 
 
text-align:center; 
 
font-size:10px; 
 
z-index:100000; 
 
} 
 
.item-slot>img { 
 
top:20px; 
 
width:85px; 
 
height:66px; 
 
} 
 
.item-slot p:hover{ 
 
    margin: -1em 0 0 0; 
 

 
    
 
}

<div class="item-slot"> 
 
    <img src="http://cdn.steamcommunity.com/economy/image/something_here"> 
 
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> 
 
</div>