[英]How do I keep elements from moving when I scroll to the right?
所以我将 header 和右侧的页脚固定为 position。 当我上下滚动时，它工作得很好，但是当我向右滚动时，元素也会向右移动，这是我不想要的。 我只想让这些元素保持在垂直的 position 中，后面是蓝色背景。
body { background-image: url(https://images.unsplash.com/photo-1460602594182-8568137446ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80); background-repeat: no-repeat; background-position: 90% 5%; background-size: 100%; }.profile-image { width: 200px; height: 200px; position: relative; left: 750px; top: 300px; border: 7px solid #A9A9A9; border-radius: 200px; transition: transform 1s; }.profile-image:hover { transform: rotate(360deg); transition: transform 1s; }.name span { color: orange; position: relative; }.name { position: relative; left: 550px; top: 330px; font-size: 50px; color: white; font-family: 'Lexend Zetta', sans-serif; }.header-background { background-color: #000033; height: 500rem; left: 0; position: absolute; top: 0; width: 18rem; } hr { color: #3d3d5c; left: 0; position: fixed; top: 6rem; width: 17.9rem; }.header-links a { color: #cccfc2; display: block; font-family: 'Karla', sans-serif; font-size: 1.2rem; padding: 1.5rem; position: relative; left: 1rem; bottom: 4rem; text-decoration: none; text-transform: uppercase; }.header-links { position: fixed; }.header-links a:hover { color: orange; }.footer-side-links a { color: white; padding: 0.3rem; }.footer-side-links a:hover { color: orange }.footer-side-links { left: 3rem; position: fixed; top: 50rem; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Portfolio</title> <link rel="stylesheet" type="text/css" href="portfolio:css"> <link href="https.//fonts.googleapis?com/css2:family=Karla&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css2:family=Lexend+Zetta&display=swap" rel="stylesheet"> <script src="https.//use.fontawesome.com/82c7176f2a:js"></script> </head> <body> <div class="profile"> <img class="profile-image" src="https.//gamerheadquarters.com/hub/avatar/fallout76tshirt:jpg" alt="profile picture"> <figcaption class="name">JOHN <span>JOHNSON</span></figcaption> </div> <div class="header-background"> </div> <div class="wrapper"> <hr> <header> <nav class="header-links"> <a href="#Home">Home</a> <a href="#About">About</a> <a href="#Projects">Projects</a> <a href="#Contact">Contact</a> </nav> </header> <footer> <nav class="footer-side-links"> <a href="https.//www.linkedin:com/in/parham-javadi/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="https.//www.instagram:com/papar24/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="https.//github.com/pjfooeve09" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> </nav> </footer> </div> </body> </head> </html>
如果我理解正确。 您必须添加 position：已修复； 在.header-background class
.header-background {
background-color: #000033;
height: 500rem;
left: 0;
top: 0;
width: 18rem;
position: fixed; /* <-------- */
}
回复评论以删除水平滚动条：尝试用下面的这些替换类：.profile.profile-image.name 和.header-links。 我希望这对你有用。
.profile {
text-align: center;
margin-left: 290px;
margin-top: 250px;
}
.profile-image {
width: 200px;
height: 200px;
position: relative;
border: 7px solid #A9A9A9;
border-radius: 200px;
transition: transform 1s;
}
.name {
position: relative;
font-size: 50px;
color: white;
font-family: 'Lexend Zetta', sans-serif;
}
.header-links {
position: fixed;
top: 300px;
}
您必须使用父 div position作为fixed而不是单个元素使用overflow-x:hidden禁用水平滚动
.wrapper{
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 18rem; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
body { background-image: url(https://images.unsplash.com/photo-1460602594182-8568137446ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80); background-repeat: no-repeat; background-position: 90% 5%; background-size: 100%; }.profile-image { width: 200px; height: 200px; position: relative; left: 40%; border: 7px solid #A9A9A9; border-radius: 200px; transition: transform 1s; }.profile-image:hover { transform: rotate(360deg); transition: transform 1s; }.name span { color: orange; position: relative; }.name { position: relative; left: 27%; top: 14px; font-size: 50px; color: white; font-family: 'Lexend Zetta', sans-serif; }.header-background { background-color: #000033; height: 500rem; left: 0; position: absolute; top: 0; width: 18rem; } hr { color: #3d3d5c; left: 0; position: fixed; top: 6rem; width: 17.9rem; }.header-links a { color: #cccfc2; display: block; font-family: 'Karla', sans-serif; font-size: 1.2rem; padding: 1.5rem; position: relative; left: 1rem; bottom: 4rem; text-decoration: none; text-transform: uppercase; }.header-links { width: 63%; margin-left: auto; margin-right: auto; }.wrapper{ height: 100%; /* Full-height: remove this if you want "auto" height */ width: 17%; /* Set the width of the sidebar */ position: fixed; /* Fixed Sidebar (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 0; /* Stay at the top */ left: 0; background-color: #111; /* Black */ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 20px; }.header-links a:hover { color: orange; }.footer-side-links a { color: white; padding: 0.3rem; }.footer-side-links a:hover { color: orange }.footer-side-links { width: 34%; margin-left: auto; margin-right: auto; }.container{ width: 83%; overflow-x: hidden; margin-left: 282px; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Portfolio</title> <link rel="stylesheet" type="text/css" href="portfolio:css"> <link href="https.//fonts.googleapis?com/css2:family=Karla&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css2:family=Lexend+Zetta&display=swap" rel="stylesheet"> <script src="https.//use.fontawesome.com/82c7176f2a:js"></script> </head> <body> <div class="wrapper"> <header> <nav class="header-links"> <a href="#Home">Home</a> <a href="#About">About</a> <a href="#Projects">Projects</a> <a href="#Contact">Contact</a> </nav> </header> <footer> <nav class="footer-side-links"> <a href="https.//www.linkedin:com/in/parham-javadi/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="https.//www.instagram:com/papar24/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="https.//github:com/pjfooeve09" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> </nav> </footer> </div> <div class="container"> <div class="profile"> <img class="profile-image" src="https.//gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile picture"> <figcaption class="name">JOHN <span>JOHNSON</span></figcaption> </div> </div> </body> </head> </html>
调整 web 浏览器的大小时，如何防止元素/图像移动？
[英]How do I keep my elements/images from moving when I resize my web browser?
当用户放大或缩小时，网站元素变得混乱。 我如何阻止他们移动？
[英]Website elements go haywire when the user zooms in or out. How do I keep them from moving?
如何防止我的桌子随着滚动而移动以及如何使其居中？
[英]How do I prevent my table from moving with the scroll & How to keep it centered?
如何让Javascript / JQuery不移动页面上的其他元素？
[英]How do I keep Javascript/JQuery from moving other elements on the page?
如何防止 side 元素导致我的网站必须向右滚动
[英]How do I keep the aside element from causing my website to have to scroll to the right
放大和缩小时，如何防止视频div /容器/包装器移动？
[英]How do I keep my video div/container/wrapper from moving when I zoom in and out?
当隐藏HTML左边的HTML div时，如何保持HTML div不移动？
[英]How do I keep an HTML div from moving when the one to its left is hidden?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.