[英]CSS bottom, top, right, left element not working
Everyone, I face a problem, please first look image, then check my code, i am shohel in image.大家,我遇到一个问题,请先看图像,然后检查我的代码,我在图像中是shohel。 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.
我想在我的图像右侧使用图标添加或移动向下滚动,并在我的图像左侧使用相同的社交媒体图标,就像 Ansell Klee 图像一样。 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"> <a href="#" class="nav__logo">Shohel</a> <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"> <a href="#" class="button button-ghost"> Download CV</a> <a href="#about" class="button">About Me</a> </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>
You need to add property position: absolute;
您需要添加属性
position: absolute;
OR position: fixed;
或
position: fixed;
according to your requirement before adding top:;
在添加
top:;
之前根据您的要求:; OR right:;
或
right:;
OR bottom:;
或
bottom:;
OR left:;
或
left:;
This is because these properties only work with positioned elements other than position: static;
这是因为这些属性仅适用于
position: static;
add a property as position:absolute to the same class添加一个属性为 position:absolute 到相同的 class
.home__scroll{color: var(--first-color);
right: -1.5rem;
bottom: 11rem;
display: grid;
row-gap: 2.25rem;
justify-items: center;
position: absolute;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.