js设置位置不变

在JavaScript中，如果你想设置某个元素的位置不变，通常是通过CSS样式来实现的。以下是一些基础概念和相关方法：

基础概念

CSS定位：CSS提供了多种定位方式，包括static、relative、absolute、fixed和sticky。
position属性：通过设置元素的position属性，可以控制元素的定位方式。

类型

static：默认值，元素按照正常文档流进行布局。
relative：相对定位，元素相对于其正常位置进行定位。
absolute：绝对定位，元素相对于最近的非static定位的祖先元素进行定位。
fixed：固定定位，元素相对于浏览器窗口进行定位。
sticky：粘性定位，元素在滚动到某个位置之前表现为相对定位，之后表现为固定定位。

应用场景

固定导航栏：使用fixed定位，使导航栏在页面滚动时保持在顶部。
弹出框：使用absolute定位，使弹出框相对于某个特定元素定位。

示例代码

固定定位（fixed）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Position Example</title>
    <style>
        .fixed-element {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #f1f1f1;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <div class="fixed-element">Fixed Navigation Bar</div>
    <div style="height: 2000px;">Scroll down to see the fixed element</div>
</body>
</html>

绝对定位（absolute）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute Position Example</title>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            border: 1px solid #000;
        }
        .absolute-element {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #ffcc00;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="absolute-element">Absolute Positioned Element</div>
    </div>
</body>
</html>

常见问题及解决方法

元素重叠：如果多个元素使用绝对定位或固定定位，可能会发生重叠。可以通过调整z-index属性来控制元素的堆叠顺序。
元素重叠：如果多个元素使用绝对定位或固定定位，可能会发生重叠。可以通过调整z-index属性来控制元素的堆叠顺序。
父元素影响：绝对定位的元素会相对于最近的非static定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于文档根元素（<html>）进行定位。
父元素影响：绝对定位的元素会相对于最近的非static定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于文档根元素（<html>）进行定位。

通过以上方法和示例代码，你可以灵活地控制元素的位置，使其在页面中保持不变。

页面内容是否对你有帮助？

有帮助

没帮助

设置时PropertyGrid滚动位置不变

、、、、

我在Windows应用程序中有一个PropertyGrid。每当它的SelectedObject更改时，它都会将其VerticalScroll值重置为0。我要把它留在原处。下面的代码似乎什么也没做。我尝试过PerformLayout和其他一些解决方案，但都没有成功。有什么想法吗？MyGrid.SelectedObject = SomeDifferentObject;

浏览 0提问于2019-02-27得票数 3

回答已采纳

1回答

Three.js网格位置不变

我有一个名为mesh的网格。我这样做：console.log(mesh.position);输出： x=0 z=0z: 10

浏览 3提问于2012-12-18得票数 0

1回答

位置不变

、、

我尝试将div移到一边或另一边，这取决于它的位置，但是！不管我用什么方法来判断它的位置，它都不会改变。portafolio").offset().left;var porP保存div (portafolio)位置的百分比现在，portafolio的初始位置是13(%) { $("#portafolio").mouseen

浏览 1提问于2011-07-10得票数 1

1回答

如何管理具有绝对位置的两个div

、

问题是，对于这两个div2，我需要将位置设置为绝对值(请参阅图片- div1和div2)。Div1具有属性另一个div应该有rest页面的宽度。如何在不使用JS的情况下动态地设置div2？两个div的位置都不能改变，必须保持绝对不变。

浏览 1提问于2013-09-23得票数 1

1回答

Xtrareports波段大小和位置

、、、、

如何在运行时设置乐队的大小和位置？Bands.Add(_pageHeader);当我这样做时，两个波段的高度和位置不变，它们保持不变。

浏览 0提问于2013-12-11得票数 1

回答已采纳

1回答

在THREE.js中获取顶点着色后的变换顶点位置

、

我正在更改顶点着色器中某些顶点的位置，但我无法找到将这些新更新的顶点位置返回js内的方法(我目前正在使用THREE.js :网格顶点的顶点位置始终保持不变)。

浏览 2提问于2015-10-06得票数 3

回答已采纳

1回答

保持视频播放器控件文本的位置不变

、

我在JavaScript中有一个视频播放器控件，当用户放大视频或使屏幕大于1500px时，我需要保持播放时间和总时间在适当的位置。

浏览 0提问于2015-02-18得票数 0

1回答

两个对对象的引用，但是当将其修改为一个时，第二个仍然显示不变的对象。

我试图修复JS插件中的一个问题，在调试之后，我发现有时一个变量正在改变另一个变量，有时不是。

浏览 1提问于2016-10-29得票数 1

回答已采纳

1回答

修复了Aframe中的UI元素

是否可以在Aframe中为UI元素设置固定位置。当用户在环境中导航时，元素保持不变？例如，我想为此元素设置固定位置 <a-entity text="value: Hello World;"></a-entity>

浏览 18提问于2019-12-16得票数 0

回答已采纳

1回答

MediaElement位置不变

、、

我想用MediaElement来播放音乐，当音乐播放到某个位置时，做一些动作。

浏览 0提问于2013-07-18得票数 0

2回答

滚动时更改3D透视-固定消失点

、、、

我能得到的唯一结果是：编辑: JS完成了这项工作。我使用OnScroll事件检查滚动位置并重新设置透视原点。

浏览 1提问于2013-07-01得票数 1

回答已采纳

2回答

按钮位置不变

、

/test.js"></script></html>在突出显示按钮(ID: button4)的代码的css部分中，更改margin-top属性没有任何效果。

浏览 2提问于2019-11-10得票数 0

2回答

div变换后的垂直定位内容

、、、、

background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; } JS

浏览 5提问于2013-12-09得票数 4

回答已采纳

1回答

如何防止CCLabelBMFont更新位置？

、

每次更改CCLabelBMFont对象的CCLabelBMFont属性时，都会更新位置。因此，如果我想显示更新过期的时间，那么时间在每次更新上都会改变位置。如何在更改字符串值的同时保持CCLabelBMFont的位置？

浏览 2提问于2013-10-10得票数 0

回答已采纳

1回答

使用fs.write而不是fs.writeFile覆盖文件的所有内容

、

使用Node.js，有没有办法用fs.write而不是fs.writeSync覆盖所有的文件内容？看起来fs.write将写入给定位置的字节，而保持其他字节不变？

浏览 28提问于2019-07-14得票数 2

回答已采纳

1回答

position:fixed元素是否可以从正文宽度计算出百分比宽度？

、、

我有一个侧边栏，它从页面的一半位置开始:绝对。当你向下滚动并点击侧边栏的顶部时，一些js会将其设置为position: hit，这样当你继续向前滚动时，它就会停留在视图中。问题是，我希望页面的宽度是流畅的，所以我设置了侧栏宽度:25%，其余内容宽度:75%。页面的正文宽度:100%，边上有一些填充。这是有道理的，但这并不是理想的结果--我希望滚动时宽度保持不变。我能做什么?css或js (jquery)解决方案。谢谢

浏览 2提问于2013-06-06得票数 0

回答已采纳

1回答

rails资源问题

、

我有一个项目，包括很多js，css和png。我无法将它们划分为javascripts和样式表文件夹。例如，我有plugin1文件夹，它包括js和css文件，我希望将它们放在同一个文件夹中。

浏览 4提问于2015-11-04得票数 0

回答已采纳

1回答

将body设置为位置时，固定滚动位置:fixed (ios)

、、、、

为了防止覆盖后的内容在iPhone等设备上滚动，我使用以下代码将“body”类切换为设置为position: fixed，overlay: hidden的类。$("body").toggleClass("fix");});这是可行的，除了当点击按钮激活覆盖时，页面返回到顶部，这不是我想要的-我希望当前滚动位置保持不变我猜我需要在这里使用一些JS来获取滚动位置并将其修复到位，然后在覆盖关闭时禁用它。问题是，

浏览 7提问于2015-10-10得票数 0

1回答