CSS bottom, top, right, left element not working - html

Question

Everyone, I face a problem, please first look image, then check my code, i am shohel in image. I want to scroll down with icon add or move in my image right side and same social media icon in my image left side as like Ansell Klee image. and when i right bottom increase but not any happened in my browser, not working, why this happened? I don't understand Advanced love and thanks.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
--first-hue: 250;
--sat:66%;
--lig:75%;
--second-hue:219;
--first-color: hsl(var(--first-hue),var(--sat),var(--lig));
--first-color-alt : hsl(var(--first-hue),var(--sat),71%);
--titel-color: hsl(var(--second-hue),15%,95%);
--text-color: hsl(var(--second-hue),8%,75%);
--text-color-light: hsl(var(--second-hue),4%,55%);
--body-color:hsl(var(--second-hue),48%,8%);
--container-color:hsl(var(--second-hue), 32%,12%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif ;
--biggest-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-bold: 700;
/*========== Margenes Bottom ==========*/
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
#media screen and (min-width: 968px) {
:root {
--biggest-font-size: 2.5rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/* Base */
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
scroll-behavior: smooth;
}
body,button,input,textarea{
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
body{
background-color: var(--body-color);
color: var(--text-color);
}
h1,h2,h3{
color: var(--titel-color);
font-weight: var(--font-medium);
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
button{
cursor: pointer;
border: none;
outline: none;
}
img{
max-width: 100%;
height: auto;
}
.container{
max-width: 968px;
margin-left: 1rem;
margin-right: 1rem;
}
.grid{
display: grid;
gap: 1.25rem;
}
.main{
overflow: hidden;
}
.section{
padding: 4.5rem 0 1rem;
}
.section__title,
.section__subtitle{
text-align: center;
}
.section__title{
font-size: var(--h2-font-size);
color: var(--first-color);
margin-bottom: 2rem;
}
.section__subtitle{
display: block;
font-size:var(--smaller-font-size) ;
color: var(--text-color-light);
}
/* header and nav */
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color:var(--body-color);
z-index: var(--z-fixed);
}
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo{
color: var(--first-color);
font-weight: var(--font-medium);
transition: .4s;
}
.nav__logo:hover{
color: var(--first-color-alt);
}
.nav__menu{
position: fixed;
bottom: 1rem;
background: hsla(var(--second-hue),32%,16%,.8);
width: 90%;
border-radius: 4rem;
padding: 1rem 2.25rem;
backdrop-filter: blur(10px);
}
.nav__list{
display:flex ;
justify-content: space-between;
align-items: center;
}
.nav__link{
color: var(--text-color);
font-size: 1.25rem;
padding: .4rem;
display: flex;
border-radius: 5rem;
}
/* acrive-link */
.active-link{
background: linear-gradient(180deg,hsla(var(--first-hue),var(--sat),var(--lig),1), hsla(var(--first-hue),var(--sat),var(--lig),.2)
);
box-shadow: 0 0 16px hsla(var(--first-hue),var(--sat),var(--lig),.4);
}
/* home */
.home__container{
position: relative;
row-gap: 4.5rem;
padding-top: 2rem;
}
.home__data{
text-align: center;
}
.home__greeting,
.home__education{
font-size: var(--small-font-size);
font-weight: var(--font-medium);
}
.home__greeting{
display: block;
color: var(--titel-color);
margin-bottom: .25rem;
}
.home__education{
color: var(--text-color);
margin-bottom: 2.5rem;
}
.home__name{
font-size: var(--biggest-font-size);
}
.home__img{
width:160px;
}
.home__handel{
justify-self: center;
width: 190px;
height: 244px;
background: linear-gradient(180deg,
hsla(Var(--first-hue), var(--sat), var(--lig),1),
hsla(Var(--first-hue), var(--sat), var(--lig), .2)
);
border-radius: 10rem 10rem 1rem 1rem;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.home__buttons{
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
}
.home__social,
.home-scroll
{
position:absolute ;
}
.home__social{
bottom: 9rem;
left: 0;
display: grid;
row-gap: .5rem;
}
.home__social-link{
width: max-content ;
background-color: var(--container-color);
color: var(--text-color);
padding: .25rem;
border-radius: .25rem;
display: flex;
font-size: 1rem;
transition: .4s;
}
.home__social-link:hover{
background-color: var(-first-color);
color:#fff;
}
.home__social::after{
content: '';
width: 32px;
height: 2px;
background-color: var(--first-color);
transform: rotate(90deg) translate(16px,3px);
}
.home__scroll{
color: var(--first-color);
right: -1.5rem;
bottom: 4rem;
display: grid;
row-gap: 2.25rem;
justify-items: center;
}
.home__scroll-icon{
font-size: 1.25rem;
}
.home__scroll-name{
font-size: var(--smaller-font-size);
transform: rotate(-90deg);
}
.button{
display: inline-block;
background-color: var(--first-color);
color: var(--body-color);
padding: .75rem 1rem;
border-radius: .5rem;
font-weight: var(--font-medium);
transition: .4s;
}
.button:hover{
background-color:var(--first-color-alt);
color: var(--body-color);
}
.button-ghost{
background-color: transparent;
border: 2px solid var(--first-color);
color: var(--first-color);
}
<!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>Responsive shohel Portfolio Website </title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<script src="./script.js" defer></script>
</head>
<body>
<header class="header" id="header">
<nav class="nav container">
Shohel
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class='bx bx-home-alt'></i>
</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">
<i class='bx bx-user' ></i>
</a>
</li>
<li class="nav__item">
<a href="#skills" class="nav__link">
<i class='bx bx-book' ></i>
</a>
</li>
<li class="nav__item">
<a href="#work" class="nav__link">
<i class='bx bx-briefcase-alt-2' ></i>
</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">
<i class='bx bx-message-square-detail' ></i>
</a>
</li>
</ul>
</div>
<!-- theme change button -->
<i class='bx bx-moon change-theme' id="theme-button" ></i>
</nav>
</header>
<!-- Main -->
<main class="main">
<!--Home -->
<section class="home section" id="home">
<div class="home__container container grid">
<div class="home__data">
<span class="home__greeting">Hellow, I'm</span>
<h1 class="home__name">Shohel</h1>
<h3 class="home__education">Frontend Developer</h3>
<div class="home__buttons">
Download CV
About Me
</div>
</div>
<div class="home__handel">
<img src="./img/IMG_20220127_145041_1-02-removebg-preview.png" alt="" class="home__img">
</div>
<div class="home__social">
<a href="" class="home__social-link">
<i class='bx bxl-linkedin-square' ></i>
</a>
<a href="" class="home__social-link">
<i class='bx bxl-github' ></i>
</a>
<a href="" class="home__social-link">
<i class='bx bxl-dribbble' ></i>
</a>
</div>
<a href="" class="home__scroll">
<i class='bx bx-mouse home__scroll-icon' ></i>
<span class="home__scroll-name">Scroll Down</span>
</a>
</div>
</section>
</main>
</body>
</html>

Answer 1

add a property as position:absolute to the same class
.home__scroll{color: var(--first-color);
right: -1.5rem;
bottom: 11rem;
display: grid;
row-gap: 2.25rem;
justify-items: center;
position: absolute;}

Answer 2

You need to add property position: absolute; OR position: fixed; according to your requirement before adding top:; OR right:; OR bottom:; OR left:;
This is because these properties only work with positioned elements other than position: static;