CSS: How to work with position relative
1 min readAug 25, 2020
<!DOCTYPE html><html><head><style>.image-container {float: left; /* To make the div image-container having as much width as the inner content*/background-color: blue;position: relative; /* Ancestor must have position relative in order to the child to have absolute */}.image-container img {max-width: 100%;height: auto;display: block; /* for the container to calculate height, width correctly */}.image-description {position: absolute; /* making the p overlap with the container */bottom: 0;left: 0;right: 0; /* To make the p having full width */color: #FFF;background-color: rgba(0,0,0,0.2);padding: 15px 25px;}</style></head><body><h1>The width Property</h1><div class="image-container"><img src="https://i.ytimg.com/vi/P97oXExs2OA/hqdefault.jpg" alt=""><div class="image-description"><p>Show name on terminal in stylish way</p></div></div></body></html>
