将元素定位在特定位置的Css

Question

例如，我希望将div组件定位在特定位置，

<div class "products"><div class="star"></div></div>

星型显示产品等级为星型，我在css中将其设置为

.star
{left:10px;}

当用户调整屏幕大小时，我希望更改10px。它也必须根据产品的屏幕大小进行更改。我怎么能这么做？

Answer 1

realtive; =>定位基于其当前位置的元素，而不更改布局。

基于父元素的absolute =>位置

​

.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 class="parent">
<p class="child">
uK
</p>
</div>

​

Answer 2

检查下面的示例

使用%表示左边，它将取决于容器的宽度而改变

​

.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 class="products">
  <div class="star">****</div>
</div>

​