In my last project, I searched to position some text inside cards, in a simple way.
Here an example:
To have this result, I learned to position the elements by using basic layouts:
###Position a text inside a card:###
1) In my index.html, I have 3 <div> tags, with <h2> .title-card inside.
2) In my css, I use the positions relative for the container, and absolute for the title.
=> The absolute position depends on the first parent container that has the relative position. If no parent with relative position, the element will depend on the body.
=> As you can see, I add the relative position to the container .img1.
=> Then I add the absolute position to the content .title-card.
=> With the absolute position, I can position my title everywhere I want, with properties top, right, bottom and left.
=> Now I can even position an element outside of the card, for example, a trash icon:
###Position an icon on a card:###
1) Inside my cards, I add <div class=".trash"> that contain the icon:
2) In my css, I add some properties to the .trash class:
=> As for my title, in order to position the icon everywhere I want, I add the absolute position.
=> Then I use some negative values to go outside of the card.
=> In my case, and with a small negative value of -5px, the icon stay inside and outside of the card.
=> Now I have some cards with icon trash ( to remove cards for example).
Here the result I have:
Even if we can use some margins and padding, for me the best way to position is by using absolute and relative positions.
If I would only want to center an element inside a card, I think the flex position would be very useful. How to center with flex-box