Issue
In the attached image below, I want to recreate the "1" circle to the left of the profile box. I'm currently trying to use CSS positioning to get it like the image above, but whenever I shrink my computer screen, the circle doesn't move with the profile box. I'm not quite sure how to fix it. I've attached my code below the image.
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>
Solution
You might want to look at two aspects: HTML markup and CSS basics. TL;DR. See this CodePen example I put together for you.
position: absolute;looks for the closest parent that haspositionvalue ofrelative,absolute, orfixed. If there's no parent that has such position value, the element will be positioned absolute against the body. In your example,wrapper(i.e. the immediate parent) doesn't havepositiondefined, thusRankingwill be positioned outside your intended area.As a matter of fact, you won't likely need
absolutepositioning here.transform: translateX()indeed is a good starter. Instead oftranslateY(), you could move it horizontally bytranslateX().
Again, see this CodePen example I put together for you.
Answered By - Bumhan Yu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.