Home > Software engineering >  CSS bottom, top, right, left element not working
CSS bottom, top, right, left element not working

Time：02-04

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.

Hi, 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. 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/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <script src="./script.js" defer></script>
</head>
<body>
    <header  id="header">
       <nav >
           <a href="#" >Shohel</a>

           <div >
               <ul >
                   <li >
                       <a href="#home" >
                        <i class='bx bx-home-alt'></i>
                       </a>
                   </li>

                   <li >
                    <a href="#about" >
                        <i class='bx bx-user' ></i>
                    </a>
                </li>

                <li >
                    <a href="#skills" >
                        <i class='bx bx-book' ></i>
                    </a>
                </li>

                <li >
                    <a href="#work" >
                        <i class='bx bx-briefcase-alt-2' ></i>
                    </a>
                </li>

                <li >
                    <a href="#contact" >
                        <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 >
                             
                             <!--Home -->

        <section  id="home">
             <div >
                      <div >
                          <span >Hellow, I'm</span>
                          <h1 >Shohel</h1>
                          <h3 >Frontend Developer</h3>

                          <div >
                              <a href="#" >  Download CV</a>
                            <a href="#about" >About Me</a>
                          </div>
                      </div>

                      <div >
                          <img src="./img/IMG_20220127_145041_1-02-removebg-preview.png" alt="" >
                      </div>

                      <div >
                          <a href="" >
                            <i class='bx bxl-linkedin-square' ></i>
                          </a>
                          <a href="" >
                            <i class='bx bxl-github' ></i>
                        </a>
                        <a href="" >
                            <i class='bx bxl-dribbble' ></i>
                        </a>
                      </div>

                       <a href="" >
                        <i class='bx bx-mouse home__scroll-icon' ></i>
                        <span >Scroll Down</span>
                       </a>
            </div>
        </section>









    </main>

</body>
</html>

CodePudding user response：

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;}

CodePudding user response：

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;

Page link：https//www.codepudding.com/Softwareengineering/287546.html

Prev:Why selecting the first child inside <ul> is not working while the text is inside the <a>
Next:HTML/CSS/JS: 'Show' answer on button press
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding