文章/答案/技术大牛

发布

css上下移动

CSS 上下移动基础概念

CSS（层叠样式表）是用于描述HTML文档样式的语言。通过CSS，可以控制元素的布局、颜色、字体等样式属性。上下移动元素通常涉及到CSS中的position属性以及top、bottom等定位属性。

类型

静态定位（static）：默认定位方式，元素按照正常的文档流进行布局。
相对定位（relative）：元素相对于其正常位置进行偏移。
绝对定位（absolute）：元素相对于最近的非静态定位的祖先元素进行定位。
固定定位（fixed）：元素相对于浏览器窗口进行定位，不会随页面滚动而移动。
粘性定位（sticky）：元素在滚动到特定位置时会变成固定定位。

应用场景

导航栏：通过固定定位，可以使导航栏始终保持在页面顶部。
弹出框：通过绝对定位，可以使弹出框在页面中居中显示。
图片轮播：通过相对定位和绝对定位，可以实现图片的滑动效果。

示例代码

以下是一个简单的示例，展示如何使用CSS实现元素的上下移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 上下移动示例</title>
    <style>
        .container {
            position: relative;
            height: 200px;
            border: 1px solid black;
        }
        .box {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

在这个示例中，.box元素通过position: absolute和top: 50px实现了相对于.container元素的上下移动。

常见问题及解决方法

元素重叠：如果多个元素使用绝对定位或固定定位，可能会导致元素重叠。可以通过设置z-index属性来控制元素的堆叠顺序。
元素重叠：如果多个元素使用绝对定位或固定定位，可能会导致元素重叠。可以通过设置z-index属性来控制元素的堆叠顺序。
定位不准确：如果元素定位不准确，可能是由于祖先元素的定位属性影响了子元素的定位。确保祖先元素的定位属性设置正确。
定位不准确：如果元素定位不准确，可能是由于祖先元素的定位属性影响了子元素的定位。确保祖先元素的定位属性设置正确。
响应式问题：在不同设备上，元素的定位可能会出现问题。可以使用媒体查询来针对不同屏幕尺寸调整定位。
响应式问题：在不同设备上，元素的定位可能会出现问题。可以使用媒体查询来针对不同屏幕尺寸调整定位。

通过以上方法，可以有效地解决CSS上下移动过程中遇到的问题。

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

有帮助

没帮助

尝试在IE中使用CSS移动body标记

css、internet-explorer、positioning、absolute

因此，我需要使用CSS在页面上上下移动body标签，以便将其位置设置为绝对位置，并将css属性'top‘设置为一个值来上下移动它。这在所有浏览器中都工作得很好，除了IE，在IE中它不会移动，只是停留在原始位置(top:0)。任何帮助都将非常感谢:)

浏览 1提问于2011-09-13得票数 1

1回答

如何使用CSS平滑地上下移动图像？

html、css

我是一个CSS.Is的初学者，有没有可能用CSS平滑地上下移动图像？……

浏览 0提问于2014-11-25得票数 3

回答已采纳

3回答

CSS边距-上下移动单元

css、sass、margins

我有一个3 div的上下文，一个家长和两个孩子。两个孩子一个放在另一个上面，我想在最下面的一个上加一个边距，把上面50便士上的一个移动起来。最终发生的情况是，底部的那个向下移动50便士。

浏览 6提问于2022-07-04得票数 0

回答已采纳

3回答

上下无限移动平台javascript html css

javascript、html、move、infinite、platform

我正在努力实现平台的无限上下移动。我如何修改代码才能得到这个东西？我只做了一次失败的运动。我知道我可以用CSS动画来做这件事，但是我想修改我的代码。

浏览 10提问于2022-02-01得票数 0

回答已采纳

2回答

我以前的程序会弹出一个球，但现在我希望用户能够在他们想要的时候上下移动它，向左移动，向右移动。到目前为止，我的右按钮和向下按钮工作，但我的左和上的逻辑没有。在我看来，下面的代码是正确的，但我想它不是 var currentTopPos = parseInt($("#ball").css('top'));= maxTop || newBottomPos <= 0) velocity_y *= 0; &

浏览 1提问于2015-05-12得票数 0

回答已采纳

3回答

如何定位相对于主内容区域而不是窗口的固定框？

html、css、css-position

该框将跟随您在屏幕上上下移动。在此之后，我注意到，如果我改变窗口的宽度，它会从左向右移动联系人框。 position: fixed; top: 0; width: 250px;

浏览 2提问于2012-03-11得票数 1

回答已采纳

2回答

使用Css或Jquery移动Div

javascript、jquery、css、transitions

我有一个css div，我想要移动。Css转换和Jquery上下滑动，展开或缩小元素大小。Jquery左右动画是我迄今发现的最好的。不过，我也想上下移动。你能用Jquery动画来做这个吗？如果没有，是否有使用Javascript Jquery或Css的方法来做到这一点？<!

浏览 3提问于2015-12-08得票数 0

回答已采纳

1回答

向上和向下滚动时颜色框移动

css、colorbox

在我的colorbox代码中，这是默认的CSS代码： position: absolute; z-index: 9999;} position: fixed; left: 0; overflow

浏览 1提问于2014-09-16得票数 0

2回答

jQuery垂直动画无法工作

jquery、html、css、jquery-animate

我已经设法使顶部的正方形水平移动到屏幕的末尾和背面，但我不能让中间的正方形上下移动使用现有的功能。这是我的代码：body background-color: rgb(210,210,210);{ height:relative;} {}JavaScript，我已经评论了我试图让中间的正方形上下

浏览 5提问于2014-09-09得票数 0

回答已采纳

1回答

来自CSS的健壮的图像URL链接？

html、css、grails、groovy、resources

在grails中，有没有一种很好的方法可以在CSS中可靠地链接到图像？最初，我将图像路径设置为/images/blah，在需要将应用程序部署到不同的上下文之前，它工作得很好。有没有比手动指定图像相对于css文件的路径更好的链接到图像的方法？这给我留下了像../../../images/blah这样的垃圾，只要CSS文件移动，它就会崩溃，除非您在智能集成开发环境中移动该文件。这也是丑陋的地狱。

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

回答已采纳

1回答

使用令牌输入jquery插件的Chrome css问题

css、internet-explorer、google-chrome

我在这个页面上使用jquery插件令牌输入我的下拉列表谢谢

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

2回答

css动画-使页脚上下移动

css、reactjs

我有一个脚注作为样式-当值为false时从下到上移动的组件。我该如何执行它呢？

浏览 44提问于2021-05-20得票数 1

回答已采纳

6回答

仅显示用于移动的块，而不创建新主题

blocks、theming

我试图显示一个主导航菜单块，但只为网站时，它是在一个移动观看。我需要这样做，而不需要创建一个新的主题，尽管如此，所有的工作，只有一个主题。谢谢

浏览 0提问于2012-02-27得票数 4

2回答

divs的jquery冲突检测

javascript、jquery、css、collision

我有另一个16x16像素的div，我想使用箭头键在更大的那个中移动它。问题是我不能让它正常工作，有人能告诉我我哪里做错了吗？左移有效，如果css属性" left“小于0px，它将停止16x16 div： if (e.which == '37' && ($('#p1').css('left') > "0px")) { $('#p1&#x

浏览 1提问于2012-01-12得票数 1

回答已采纳

2回答

在画布上绘制CSS转换(缩放、旋转、左、右)

javascript、css、html、canvas

我已经建立了使用CSS的视频控件，如缩放视频，旋转它，左/右移动。它适用于实时流，但当我在画布上拍照和绘画时，这些功能(旋转，缩放)不适用。我知道，因为我没有改变画布，这就是为什么它不适用。因此，我可以使用相同的CSS代码在画布上画旋转、缩放、左/右移动。(或者可能是特定于画布上下文的代码)。

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

回答已采纳

1回答

Jquery滚动图像在IE中不起作用

jquery

简单地说，我希望图像上下移动，而不是左右移动。我找到了这个jquery，并改变了它来帮助我自己，它在chrome和firefox中都可以工作，但是上帝帮助我使用IE (像往常一样)。chrome和ffox中工作，不能在IE 9中工作$(document).scroll(function(){$(".natface").css('left', 114 - $this.scrollLeft()); }

浏览 1提问于2012-10-13得票数 3

回答已采纳

3回答

有没有人在Chromecast上成功地处理过大图像、翻译/动画？

chromecast

我尝试了几种不同的css动画来在播放音乐时在屏幕上上下移动大图像。我没有发现在速度，距离转换等方面的任何变化，导致平滑过渡。

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

1回答

移动工具还是媒体查询？

theming、mobile-tools

我一直使用CSS媒体查询对过去的网站作出反应的布局。最近碰到了，到目前为止还很喜欢它。除了移动站点的另一种方法外，还试图了解它的用途。主要是寻找什么是最好的做法。太多的媒体查询会给一个点击率很高的网站带来很大压力吗?还是移动工具对任何一个小型/媒体网站来说都有点过分呢？谢谢。

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

回答已采纳

2回答

jQuery UI选项卡失去css和脚本

jquery-ui、dom、jquery、jquery-ui-tabs

我遇到的问题是，在调用$().load()之后，我丢失了以前作为DOM一部分的所有css和javascript (是的，我使用了.live)。如您所见，最初我的Div #content的内容是绿色的(如样式表中所指定的那样)，但是在我用Ajax加载它之后(通过单击Tab 1、Tab 2或Tab 3，我丢失了css (我的段落不再是绿色的)。

浏览 3提问于2012-02-23得票数 1

4回答

在不影响其他图标的情况下更改悬停时的图标大小

css

我遇到的问题是，通过使一个图标变大，它会移动它旁边的其他图标。即图标上下移动。这里是小提琴：<title>Bootstrap 101 Template</title> <div> <span>"icon i

浏览 3提问于2013-03-12得票数 2

回答已采纳

点击加载更多

css上下移动