即使没有固定的位置，我的页面也不会滚动
即使没有固定的位置，页面也不会滚动，这可以通过CSS的position属性来实现。position属性用于指定元素的定位方式，常见的取值有static、relative、fixed和absolute。
对于这个问题，可以使用position: fixed来实现页面不滚动的效果。当一个元素的position属性设置为fixed时，它的位置将相对于浏览器窗口固定，不会随页面滚动而改变。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#fixed-element {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
padding: 20px;
}
</style>
</head>
<body>
<div id="fixed-element">
<h1>这是一个固定位置的元素</h1>
<p>即使页面滚动，我也会一直保持在屏幕中心。</p>
</div>
</body>
</html>在上面的示例中，我们创建了一个id为"fixed-element"的div元素，并将其position属性设置为fixed。通过设置top和left属性以及transform属性，我们将该元素定位在屏幕的中心位置。无论页面如何滚动，该元素都会保持在屏幕中心。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），腾讯云内容分发网络（CDN）
- 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整计算资源。 产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云内容分发网络（CDN）：加速静态资源的传输，提高网站的访问速度和用户体验。 产品介绍链接：https://cloud.tencent.com/product/cdn
相关·内容
2回答
当滚动父div时，位置固定不起作用
html、css、css-position
我在fixed div里面有一个按钮outer。问题是当我设置position: fixed(在页面滚动时保留按钮)时，它没有正常工作。
按钮仍在滚动，并移出屏幕。
这是我的密码
.rotate {
transform: rotate(30deg);
background: blue;
width: 300px;
height: 300px;
margin: 0 auto;
}
.fixed {
position: fixed;
background: red;
padding: 10px;
color: white;
top: 50px;
}
&
浏览 1提问于2017-10-11得票数 2
回答已采纳
3回答
Firefox:如何在不破坏固定位置元素的情况下对整个页面进行灰度缩放？
html、css、firefox、centering、css-filters
为什么 (似乎与大小/位置无关)破坏了您给后代元素一个固定位置的能力？
除了回答这个问题之外，请提出一个解决我下面展示的问题的解决方案。
下面的CSS和HTML只会在视口中心产生一个小的红色框：
#box
{
background: red; color: white;
display: inline-block;
border: solid #333333 10px;
padding: 5px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DO
浏览 3提问于2020-07-03得票数 2
回答已采纳
1回答
为什么意志改变:不透明度对待固定元素与将改变:在铬转换？
javascript、html、css、web-performance、will-change
我正在努力优化我的网页应用程序的滚动。我有大量数据的数据表，滚动变得非常糟糕。我将will-change: transform添加到数据表中，但它破坏了我的表标题，即position: fixed (我修改了它们以允许它们与视图一起滚动)。这些元素根本不与视图一起移动，它们只是停留在文档的流中。
但偶然地，我发现，如果我使用will-change:opacity，我的固定标题是好的。有人能解释一下这种行为吗？我还没有找到任何文件表明他们应该采取不同的行动。
这是一个代码笔，其中有一个我所说的例子。在两个值之间切换，并在蓝色div中滚动。
这也是笔上的基本代码：
html：
<div
浏览 3提问于2017-10-09得票数 3
回答已采纳
3回答
浮动的Div Overflow滚动浏览器
jquery、css
我有一个在jQuery调用中触发的div。我正在使用这个css
.Window {
display:none;
background-color:#FFFFFF;
z-index:1;
min-width:500px;
min-height:180px;
top:20%;
position:fixed;
left:50%;
margin-left:-250px
}
基本上，div悬停在屏幕中央的内容上。问题是，当我在.Window目录中放置额外的内容，并且目录比浏览器本身高时，浏览器窗口不会滚动。我该怎么做才能让浏览器窗口
浏览 0提问于2012-03-23得票数 0
5回答
如何在CSS中垂直和水平地对头进行居中？
html、css
<html>
<head>
<h1>Hello.</h1>
</head>
<link rel="stylesheet" type="text/css" href="butters.css">
<link href="https://fonts.googleapis.com/css?family=Galada" rel="stylesheet">
<body></body>
<
浏览 5提问于2016-07-05得票数 0
回答已采纳
2回答
我的页面不会向下滚动？
html、css
我正在尝试制作这个页面，但是一旦屏幕变小，我就不会向下滚动看到更多的文本。这是链接
<html>
<div class="container_12 container clearfix">
<div class="grid_12 clearfix main_content">
<div class="content">
<div><img src="http://placehold.it/780x
浏览 3提问于2014-01-03得票数 3
回答已采纳
1回答
CSS Div位置行为
css、css-position、fixed、absolute
我在理解div位置(相对、绝对、固定)属性时遇到了问题。我基本上有一个绝对的div居中。在div中，应该可以垂直和水平滚动。在这个div里面应该是一个固定的标题，它的宽度大于屏幕( overflow )，还有一个内容div，它在垂直和水平方向上都有溢出。
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(10
浏览 2提问于2016-05-21得票数 0
2回答
网站高度离屏
html、css、web、scrollbar
我正在建设这个网站，并创建了一个很好的布局，我需要什么。然而，在较小的(膝上型电脑)屏幕上，内容高于屏幕，不允许上下滚动。相反，它一直在显示我的内容的确切中心。
如何将滚动条添加到整个页面，这样人们就不只是固定在页面的中心了？
我现在的css：
<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#maincanvas{
posit
浏览 4提问于2016-09-07得票数 0
回答已采纳
5回答
向HTML页面添加固定栏
html、css
我需要创建一个HTML页面，它由两个主要部分组成:一个固定的标题部分(一个选择栏)和一个显示文本的第二个部分。我已经尝试了下面的代码，但是由于我刚开始使用CSS，这并不像我想要的那样工作：
9 <style type=\"text/css\">
10 #header {
11 position:fixed;
12 top:0px;
13 margin:auto;
14 width: 100%;
15 background:#F0F0F0;
16 }
17 #content {
18 position:
浏览 6提问于2014-06-03得票数 2
回答已采纳
10回答
如何制作一个固定的div？
css、html、fixed
我试图使框被固定在页面的右下角，而不是随着页面的滚动向下移动。但不知道为什么对我不起作用。下面是我的代码：
<html>
<head>
<style type="text/css">
.tooltip {
width: 200px;
position: fixed;
top:auto;
bottom:0px;
right:0px;
left:auto;
}
</style>
</head>
<body>
<div class="tooltip">
浏览 0提问于2010-01-28得票数 8
回答已采纳
2回答
使用CSS动画框以填充整个屏幕，而不会突然跳转。
css、css-transitions
我有以下代码，它只从容器顶部绘制一个黄色框80vh：
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--t: 1s;
}
body {
padding:0;
margin:0;
}
.contain {
position:relative;
height:400vh;
background:blue;
}
.box {
position:absolute;
top:80vh;
height:400px;
width:50vw;
left:0;
bac
浏览 4提问于2020-09-07得票数 0
回答已采纳
2回答
HTML页脚/分页定位
html、css、positioning、footer
可能有点简单的问题，但目前正在尝试创建一个带有横幅/页眉和菜单的个人网站，效果很好，还有一个页脚栏。两者都使用div，中间有一个' main‘div作为主要内容。由于某些原因，页脚栏出现在菜单/标题栏的顶部，当我试图将其放在主要部分下方时，页脚栏将其覆盖，并使其停留在页面的底部。
@font-face {
font-family: "cicle-gordita";
src: url("fonts/Cicle_Gordita.ttf") format("truetype");
src: url("fonts/Cicl
浏览 1提问于2016-10-25得票数 0
2回答
将固定元素动画到视口中心。
css、css-transitions、css-animations
我在页面右上角有一个元素position: fixed;。
我希望它“成长和移动”时，点击屏幕的中心。
我所知道的在页面的死胡同中定位的最佳解决方案是
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
如果最初使用top和left属性定位元素，那么一切都会很好，但是如果元素最初使用right而不是left定位，动画中会有一个令人讨厌的跳转。
const myFunc = function() {
let f = document.getElementById('element'
浏览 1提问于2019-05-07得票数 5
回答已采纳
1回答
CSS转换不能处理高内容
css、viewport、css-transforms
当使用对垂直中心内容的转换时，如果内容不高于视图端口，则工作正常，但如果它更高，则无法滚动以看到最上面的内容。有解决办法吗？
CSS
.center {
position: $position;
top: 50%;
transform: translateY(-50%);
}
p{
height: 1500px;
}
HTML
<div class="center">
<h1>I am pushed off screen!?</h1>
<p>Tall Content...</p>
浏览 1提问于2016-03-14得票数 1
回答已采纳
2回答
固定位置不工作
html、css、wordpress、shortcode、contact-form-7
我已经创建了一个与联系人表格7的表格：
input[type='text'],
input[type='tel'],
input[type="email"] {
text-align: right;
font-family: heebo;
color: #001a71 !important;
background-color: #ffffff !important;
border: 1px solid #001a71 !important;
font-size: 1.563em !important;
height
浏览 0提问于2018-06-16得票数 0
回答已采纳
2回答
位置:在移动设备上不正确地工作
html、css
我有一个回应网站，我正在工作。当它切换到移动布局时，顶部滚动了一点，然后就会粘在屏幕的顶部，不对齐所有的东西。这在桌面布局上工作得很好。
#topbar {
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
height: 15%;
box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}
@media (min-width: 35em) {
#topbar {
height: 60
浏览 1提问于2022-06-28得票数 0
回答已采纳
9回答
将div与右侧的固定位置对齐
javascript、css
我想要显示一个即使在用户滚动页面时也始终可见的div。为此，我使用了CSS position: fixed;。
现在，我还想在父div的右上角显示div。
我尝试使用下面的CSS代码来实现这个目标：
.test {
position: fixed;
text-align: right;
}
但它不会将元素在右侧对齐。
我的示例页面可以在中找到，我想要对齐的div元素在父类parent下称为test。
是否有任何CSS或JavaScript解决方案来对齐屏幕右侧的固定位置元素？
浏览 0提问于2010-05-14得票数 36
回答已采纳
1回答
基于jQuery滚动的jquery增减值
javascript、html、jquery、css
当页面滚动应该像这样增加0.10，0.15，0.20**等等，当我再次滚动顶部时，它应该以类似于这个0.15，0.10，0.05**的方式减少，当屏幕触摸顶部时，应该是如何使用jquery来实现这一点。
var counter = 0
$(window).scroll(function(){
var a = $(this).scrollTop();
var counterIncrement = counter += 0.05;
$("h1").text(counterIncrement.toFixed(2));
})
h1{
positio
浏览 3提问于2021-02-23得票数 1
回答已采纳
1回答
如何为同一元素创建“on涡旋”状态和空闲状态？
jquery、scroll、onscroll
我想知道如何定位:固定元素在滚动时改变样式，然后在用户停止滚动时返回到“空闲”状态。直到现在为止，我只找到了一些脚本，这些脚本一旦检测到滚动，就会改变元素，但之后就不会回到以前的状态--我的目标是在屏幕中心设置一个字符，当用户滚动时具有运行状态，而当用户停止滚动时，会有一个空闲状态。以下是我到目前为止(在搜索了这个网站之后)所得到的信息：
编辑:多亏了@TCHdvlp，我可以修改我的文档，但我仍然无法让它工作:S
你能告诉我我错过了什么吗？
以下是我所拥有的：
<head>
<meta charset="utf-8"/>
浏览 0提问于2016-06-09得票数 0
1回答
键盘进入屏幕时移动浏览器中的固定元素问题
html、css、responsive-design
我不知道该怎么描述这个，这就是为什么我录了一段视频。屏幕上有固定的黄色文本。当键盘不在屏幕上时，固定的文本行为是正常的。当我集中在屏幕上，键盘变得可见，固定的项目开始滚动与页面。是虫子什么的吗？有什么解决办法吗？
视频：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=1" />
<
浏览 0提问于2018-09-24得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
