如何使绝对定位元素与页面的其余部分一起移动？
要使绝对定位元素与页面的其余部分一起移动，可以使用CSS的position属性和transform属性。以下是一个示例：
- 首先，在HTML中创建一个绝对定位元素，例如一个
<div>：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
position: relative;
width: 100%;
height: 100vh;
background-color: lightblue;
}
.absolute-element {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute-element"></div>
</div>
</body>
</html>- 接下来，使用
transform属性将绝对定位元素移动到页面的其余部分：
.absolute-element {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
transform: translate(-50%, -50%);
}这里的transform: translate(-50%, -50%);将元素向左和向上移动50%的宽度和高度，使其与页面的其余部分一起移动。
推荐的腾讯云相关产品：
- 腾讯云对象存储：提供可靠的数据存储和管理服务，支持海量数据的高效存储和快速访问。
- 腾讯云CDN：提供内容分发网络服务，加速全球访问速度，降低服务器负载。
- 腾讯云云服务器：提供可扩展的虚拟化云服务器，满足各种应用场景的计算需求。
- 腾讯云数据库：提供高性能、高可用、易管理的关系型数据库服务。
这些产品都可以帮助您更好地管理和部署您的云计算应用程序。
相关·内容
2回答
使Div只对彼此绝对
、、、、
我有<div>元素作为页面，"next“和"back”按钮在它们之间切换。当单击" next“按钮时，使用jQuery，当前页面会逐渐消失，下一页会逐渐消失。正如我到目前为止所做的那样，确保div坐在一起而不是坐在一起的唯一方法是将其设置为position:absolute。然而，这迫使div也在页面上覆盖其他任何东西，否则它们就会被推开。是否有任何方法使div基本上是相对于彼此绝对定位的，并且仍然表现为它们相对于页面的
浏览 4提问于2013-07-02得票数 1
回答已采纳
当我对一个物体进行绝对定位时，它就卡在那里了。当您调整浏览器窗口的大小时，它会停留在那里，而其他对象会四处滑动，从而杀死整个点。我如何通过绝对定位来实现这一点？
浏览 0提问于2011-10-10得票数 9
回答已采纳
我有一个UITableViewController，在其中我有一些内容，然后我试图添加一个UIView到view，使其绝对定位在tableView上，而不是滚动。但是，当我尝试将视图添加到屏幕时，它被放置到tableView中并与之一起滚动。有谁知道我如何给我的fixPositionedView固定位置，使它不会随着滚动视图的其余部分移动？
浏览 0提问于2015-11-08得票数 0
使之成为这样：( b)如果模态内容比页面长，我希望用户能够使用主滚动条查看模态的底部/顶部。换句话说，如果页面的其余部分只有100 of，但模式是200 of，我想要使用scoll条来允许用户滚动额外的100 of。我遇到的问题是，当我将no对话框定位为绝对值时，窗口将不允许我滚动以查看模态的其余部分(因为绝对元素不再在标准元素流中
浏览 6提问于2015-04-16得票数 4
回答已采纳
2回答
我使用了一个通用的高度:100%，然后div移动到可见屏幕的末尾，但当我向下滚动到站点的末尾时，div保持在相同的位置。看这张照片。
浏览 2提问于2011-04-17得票数 0
回答已采纳
我使用CSS使我的注册表单看起来很漂亮，但后来我发现当我最大化或最小化浏览器的窗口时(我的页面与浏览器窗口的中心对齐)，我的表单没有随着其他页面元素(如我的背景图像)左右移动。></div>
当窗口最小化或最大化时，为了让这个表单与其他页面元素一起移动，你知道CSS应该是什么吗？
浏览 2提问于2012-11-08得票数 0
回答已采纳
请看下面的示例
我想知道为什么div标记(带有class=progress)内容被分解成两行而不是一行(即您的进度相对于您的进度)。我不需要为'div class=progress‘指定宽度。你能给我一个解释，所有的css和/或html元素类型(或装箱，无论什么原因)都会发生这种情况吗？我只想知道规则到底是如何工作的，而不是背起它起作用或不起作用的案例。如何避免嵌套绝对定位的div标记？有这样的结构是错误的还是错误的。我在这个例子中使用它是因为我希望'100
浏览 4提问于2012-04-04得票数 1
我在一个绝对定位的div (标题)下面设置了一个左边的浮动div (导航)。除了左边的浮动div之外，我还有另一个div (文章)，它的页边距比浮动div的宽度稍大(通常用于两列布局)。如果我省略了标题的绝对位置，看起来就像我期望的:标题-页边距-导航和文章在一行中。
浏览 0提问于2016-11-03得票数 3
在分页媒体的CSS规范中，有没有一种方法可以将块元素“粘贴”到打印页面的顶部或底部，并使文本在其周围流动？ 我有一些与其他HTML内联的图像块(该块是一个包含和图像的DIV和一个标题DIV)。如果页面上没有足够的剩余空间，它们将移动到下一页，在前一页上留下大量空格。 我希望能够将它们绝对定位到它们调用的任何页面的顶部或底部，并让文本在它们周围继续。
浏览 14提问于2019-09-17得票数 0
默认情况下，容器元素使用“溢出:自动”来处理太长而不适合浏览器窗口的内容。这在大多数情况下都很好，但在这种情况下，我希望对话保持完整的高度，并与页面的其余部分一起滚动(定位为“绝对的”与“固定的”)。我可以很容易地通过修改任何位置：“固定”引用到位置：“绝对”，但这很糟糕，因为这意味着我的所有模型都会以这种方式显示。
有人想过如何优雅地完成这一工作吗？
浏览 11提问于2010-01-26得票数 0
回答已采纳
2回答
我知道如何使元素可滚动(内部元素是绝对的，父元素是相对的)，但是如果我希望将整个可滚动元素定位为绝对元素，怎么办？(将其移动到父div并在下面重叠某物)。我认为这不可能是对的吗？我已经尝试过将相对父母包装成一个绝对定位的祖父母，但很明显，它不起作用:/
浏览 7提问于2022-05-11得票数 0
我有一个具有绝对定位标题的页面，它有:徽标，指向表格部分的锚点链接，以及表格标题。内容是表的其余部分。滚动只会影响表格内容。我把它做了CSS，这样滚动条就是整个页面的高度，包括绝对定位的页眉。您可以在此处查看：被难住了。
浏览 0提问于2011-08-21得票数 3
2回答
如果我有一个具有绝对位置的元素，并且我改变了它的左侧和顶部位置，它会重新流到它的父子元素吗？如果它们没有受到影响，那么它自己的子项又如何呢?因为它们也是由左轴和上轴绝对定位的。如果我改变了一个元素的宽/高，但是在父元素和它的子元素中并不重要？
浏览 1提问于2011-09-08得票数 7
回答已采纳
有什么技巧，你可以用CSS使%大小的元素比例到他们自己的中心，而不是向角落？
据我所知，除了使用JavaScript之外，没有其他解决方案。
浏览 6提问于2014-02-03得票数 0
回答已采纳
3回答
当我在页面之间移动时，在页眉中有一个表(带有两个图像)，当所有其他元素都已卸载时，它会留在页面上。有什么想法吗?我怎么才能修复这个问题，使这个图像只与页面的其余部分一起显示？查看并单击每个菜单项以查看剩余的图像(在页面的其余部分之前加载)。
浏览 0提问于2013-04-16得票数 1
我有一个幻灯片，通过绝对定位图像，一个在另一个之上，然后改变任何幻灯片的z索引，我想要出现。问题是，我想把它移到中间，在幻灯片的两边都有"prev“链接和"next”链接。我一直在尝试在绝对定位的项目周围创建一个相对定位的容器，并且可以让幻灯片移动，但是下一个链接不会出现在幻灯片的另一边(我希望不要使用带边距的哈克斯来破坏页面的流程)。我的目标是能够处理幻灯片框，就像与页面其余部分一起流动的任何其
浏览 0提问于2016-01-17得票数 0
回答已采纳
在引导中进行编码时，我故意将一个元素放置在具有col偏移量-8的col 4中，而将另一个元素放置在单行的col-xs-2中；这意味着具有col-xs-2的元素被推送到下一行。这个很好用。但是，在对col-xs-4col-xs-偏移量-8元素使用绝对定位后，随后的元素也会被替换。我怎样才能避免下一个元素被取代？如何才能最好地做到这一点？
浏览 1提问于2017-09-05得票数 0
回答已采纳
1回答
一旦一个div被点击，它就会展开来填充整个屏幕，然后“加载”下一页。
我设置它的方式是，让每个div相对定位，然后让每个div一起坐到一起。当然，这种情况会发生，因为定位设置为相对位置。在这里可以看到这方面的例子：
为了解决这个问题，我建立了绝对定位的div。动画按照我想要的那样完美地工作，但是我不喜欢这样一个事实:由于绝对定位，
浏览 3提问于2014-10-24得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
