Css to position a element at specific position-CodePudding

I'd want to position a div component at specific location, for example,

<div class "products"><div ></div></div>

star is to display a product rated star and I set it in css as

.star
{left:10px;}

I'd want to change 10px when the user resizes the screen. It has to be changed too in relation to the screen size of product. How can I do that?

CodePudding user response：

realtive; => Position an element based on its current position without changing layout.

absolute => Position an element based on its parent

.parent{
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
}
.child{
background-color: blue;
color: white;
position: absolute;
left: 50%;
top: 50%;
}

<h2>Voilà</h2>
<div >
<p >
uK
</p>
</div>

CodePudding user response：

Check the example below

Use % for the left it will change depend on the width of the container

.products {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
}

.star {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  font-size: 25px;
  color: yellow;
}

<div >
  <div >****</div>
</div>