Help positioning icone/view under image

Asked

Viewed 97 times

0

would like to take a doubt of CSS/HTML,I will start a project in REACT NATIVE, and in the project I came across this layout objective:

inserir a descrição da imagem aqui

My doubt is, how can I put the icone (STAR) under the background image and view where this writing LOREM ?

Directly using CSS? What properties?

html css react react-native
  • 1

    I see that the question is only positioning, you can use float, and working with relative and absolute positions.

1 answer

0

As the friend above said, with "position: Absolute" you can assemble 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>

<i class="icon fas fa-star"></i>
</div>

The "container", ie the div where the icon will be inside, must have the attribute "position: relative", ie the icon with "position: Absolute" will have its position relative to the limits of the parent div(container).

I hope you’ve been helpful.

Browser other questions tagged html css react react-native

You are not signed in. Login or sign up in order to post.