I would like to take a CSS / HTML question, I will start a project in REACT NATIVE, and in the project I came across this layout objective:
My question is, how can I put the icon (STAR) under the background image and the view where it is written LOREM?
Is it directly using CSS? Which properties?
As the above friend said, with "position: absolute" you can mount this effect.
.container
{
position: relative;
border: 1px solid #aaa;
width: 230px;
background: #f2f2f2;
}
.container h2
{
margin-left: 10px;
font-weight: bold;
font-family: 'Arial';
color: #ca8a2d;
}
.icon
{
position: absolute;
right: 20px;
top: 126px;
font-size: 2em;
border-radius: 50px;
padding: 10px;
background: #fff;
color: #ca8a2d;
}
img
{
width: 100%;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Falkland_Islands_Penguins_36.jpg/250px-Falkland_Islands_Penguins_36.jpg"><h2>Lorem</h2><iclass="icon fas fa-star"></i>
</div>The "container", that is, the div where the icon will be inside, must have the "position: relative" attribute, that is, the icon with "position: absolute" will have its position relative to the boundaries of the div parent (container).
I hope it was helpful.