如何使圈子与 div 保持同步

Question

在下面的附图中，我想重新创建配置文件框左侧的“1”圆圈。我目前正在尝试使用 CSS 定位来获得如上图所示的效果，但每当我缩小计算机屏幕时，圆圈都不会随着配置文件框移动。我不太确定如何解决它。我在图片下方附上了我的代码。

body{
    width: 100%;
}

 
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 80%;
    margin: auto;
    height: 100%;
}
    
.Ranking{
    position: absolute;
    left: 20px;
    top: 10%;
    transform: translateY(-50%);
    background: #000;
    color: #fff;
    height: 52px;
    width: 52px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    padding-top: 4px;
    transition: background-color .25s linear .5s;
    font-family: "Decima";
    font-size: 30px;
    line-height: 30px;
    color: #f0f0f0;
    font-weight: 300;
}
.Description{
    flex:1;
    background-color: blue;
    grid-column: 2/5;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel = "stylesheet" href="styles.css">
</head>
<body>
    <div class="wrapper">
        <div class="Ranking"></div>
        <div class="Name">One</div>
        <div class="Summary">Summary: <br>He really hits, with a LF fit</div>
        <div class="Level">Highest Level: A+ <br> Age: 21</div>
        <div class="Body">Height: 6'1" <br> Weight: 215 lbs</div>
        <div class="Profile"><img src="images/Dustin Harris.jfif"> </div>
        <div class="Description">Five</div>
      </div>
            
</body>
</html>

Answer 1

有一个名为@media 的 CSS 元素会对您有所帮助

@media screen (min-width: 800px) {
.container {
/* position and any property of the element according the small screen viewport*/
   }
}

800px 是屏幕变为反应式的屏幕尺寸。

Answer 2

您可能需要查看两个方面：HTML 标记和 CSS 基础知识。 长话短说；博士。看this CodePen example我给你整理的

position: absolute; 查找具有 position 值 relative、absolute 或 fixed 的最近父级。如果没有具有此类位置值的父元素，则该元素将相对于主体绝对定位。在您的示例中，wrapper（即直接父级）没有定义 position，因此 Ranking 将位于您预期的区域之外。
事实上，您在这里可能不需要 absolute 定位。 transform: translateX()确实是一个很好的入门。您可以水平移动 translateX().
而不是 translateY()

再次，请参阅this CodePen example我为您整理。

如何使圈子与 div 保持同步

How to keep circle in sync with div

html

css

position