对非父容器的绝对位置
是指在前端开发中，元素的定位方式之一。通常情况下，元素的位置是相对于其父容器进行定位的，但是通过使用绝对定位，可以将元素相对于其最近的非静态定位的祖先元素进行定位。
绝对定位的元素会脱离文档流，并且不会对其他元素产生影响。它可以通过指定top、right、bottom和left属性来确定其在祖先元素中的位置。这些属性可以使用像素、百分比或其他长度单位进行定义。
绝对定位的元素可以用于创建浮动的元素、覆盖其他元素、实现动画效果等。它在以下场景中特别有用：
- 创建浮动元素：通过将元素的位置设置为绝对定位，可以将其从正常的文档流中移除，并使其浮动在其他元素之上。
- 实现动画效果：通过改变绝对定位元素的位置属性，可以实现平滑的动画效果，例如滑动、淡入淡出等。
- 覆盖其他元素：通过设置绝对定位元素的z-index属性，可以将其放置在其他元素的上方，从而实现覆盖效果。
腾讯云提供了一系列与前端开发相关的产品和服务，包括云服务器、云存储、云函数等。您可以通过以下链接了解更多信息：
- 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
请注意，以上链接仅供参考，具体的产品选择应根据您的需求和实际情况进行决策。
相关·内容
为什么不定位:对于文档来说，绝对总是意味着绝对？例如，当您有一个divB时，在另一个divA中。如果divA没有位置，divB的绝对值是否对文档是绝对的？
如果您创建了一个位置元素，并在其中放置了另一个具有位置的元素，那么该子元素是否总是相对于父/包含元素(因为缺少更好的单词)？换句话说，如果我有一个容器，这个容器是:相对的，但是一个子容器是位置:绝对，这个绝对对父母来说是绝对的，对吗？谢谢。
浏览 2提问于2012-10-05得票数 0
回答已采纳
我读到了关于jQuery.position()文档的内容，示例代码打印position.left = 15，而当我在codepen (在chrome和firefox上)测试相同的代码时，它打印23。<body>似乎有8 8px的边距，并将其添加到<div>中的15 8px填充中，其结果为23 8px。但正如官方文档所述，这个函数“检索元素相对偏移父的当前位置”，那么为什么那些主要浏览器输出23而不是18呢？
示例代码：
<!doctype html>
<html lang="en">
<head>
<met
浏览 2提问于2014-08-01得票数 0
回答已采纳
2回答
我有一个div，它显示一张地图，它横跨所有12列，但高度是50 is。我正试图在此之后再添加两个div，但我不知道为什么它是重叠的。我的mapDiv上有z-index:0，肚脐上有z-index:1。有人能指出错误吗。我已经试过把z索引添加到我的另外两个div中，但仍然没有运气。
.mapDiv {
position: absolute;
z-index: 0;
background-color: black;
height: 50vh;
width: 100%;
}
.fo
浏览 0提问于2017-01-23得票数 1
回答已采纳
2回答
我想在我的一个页面上显示一个100%高度的iFrame。
但是当我将高度100%添加到iFrame中时，它只能得到100px的高度。
我添加到iFrame中的代码如下：
<iframe src="http://carlist.bilinfo.dk/31282" style="border: none;" width="940" height="100%" frameborder="0" scrolling="auto"></iframe>
该页面是：
我试着添加html，&#
浏览 0提问于2013-11-21得票数 0
1回答
下拉字段使conatiner“可滚动”并切断下拉选项，选择器必须浮在容器上方。
由于其他原因，我无法更改外部容器中的溢出: auto
谢谢你帮我
import "./styles.css";
import { useState, useRef, useEffect } from "react";
import styled from "styled-components";
export default function App() {
const ref = useRef(null);
const difference = use
浏览 7提问于2022-06-06得票数 0
2回答
你好，所以我今天遇到了一个很有趣的问题。我不确定我做得对，也不确定背景中到底发生了什么。我没有找到任何回答我问题的文章。所以这里是：
假设我有一个非常简单的页面，比如：
<html style="height:100%;">
<body style="height:100%;">
<div style="height:2000px;"></div>
<test style="position:absolute; bottom:0;"></test
浏览 5提问于2017-11-01得票数 1
来说明我的问题。
我有一个没有高度的浮动div (.card)。它包含带有图像的嵌套div (.image)。图像使.card的边框展开来包装图像。
然而，当我将第二个div (.text)嵌套到.card中，作为.image的兄弟，并使用负边距顶将.text定位在图像的顶部时，图像不再能够扩展.card的边界框来匹配图像的底部。相反，.card的底部边界向上移动，并遵循.text的底部边界。
为什么当.text出现的时候，这个形象不再成功地扩展它的祖父母呢？
<div class="card">
<div class="image">
浏览 0提问于2016-07-29得票数 0
回答已采纳
2回答
我研究了相对定位和绝对定位，但我仍然对在选择其中一个位置后没有指定"top，left，right，bottom“会发生什么感到困惑。例如，在下面的代码中，我更改了容器的位置，当我将其从相对更改为绝对时，页脚做了一些时髦的事情。我读到，如果你添加"position:relative“并且不指定任何方向，它将完全停留在它应该在的位置。但使用firebug时，我在css中切换了这一行，顶部的菜单栏会稍微向左移动一点。怎么一回事？
HTML：
<div class="container">
<div id="heade
浏览 3提问于2012-05-25得票数 0
回答已采纳
2回答
我的实际问题比较复杂，但归根结底是这样的。如何使用CSS不允许相对定位的div在绝对定位的div上堆叠。
问题的例子：
<div id="absolute"></div>
<div id="relative"></div>
div{
width: 100px;
height: 100px;
opacity: .5;
}
#absolute{
position: absolute;
background-color: red;
}
#relative{
position: relative
浏览 1提问于2015-12-18得票数 1
回答已采纳
我一直试图为HTML页面创建一个更新日志。问题是，工作是“让它看起来漂亮”--这是我被问到的问题的确切引语。他们希望在每个div的角落都有一个特定的图像，但我遇到了一个问题。有些div滚动，特别是更新日志。每当我试图使div滚动，图像粘在一个点(图片的解释附件)。我试图使它的图像坚持到他们的角落，而不管滚动，不要移动卷轴。有办法这样做吗？CSS和HTMl很好，我只是想把它限制在项目的HTML上。
编辑:忘了说这句话，但每当我使用位置-修复它结束到页面的边缘，而不是div。这也必须是移动友好的最好。
它所做的：
我需要它做什么(通过FireAlpaca编辑的图像，而不是实际发生的事情)：
我当前
浏览 1提问于2022-08-04得票数 0
如何将引导窗体输入对齐到页面底部？我尝试过几种不同的方法，但都没有效果。
我需要将form元素与底部对齐，使其看起来像正确的消息输入。
但是，当我尝试使用form { position: fixed; bottom: 0; }时，它会更改输入的格式。
谢谢你的帮助。
<div class="container-fluid">
<div class="row">
<div class="col-md-3 messages">
<p class="city">
浏览 2提问于2017-12-13得票数 1
回答已采纳
我想创造一个虚拟森林。
我有：
固定大小的div，我想把树摊开
随机树数(每棵树是一个PNG)
中间的小方格，要远离树木。
我怎样才能把树展开，让它们：
不会互相重叠
不会进入中央分区
计算它们的大小(css)，以便所有的树都符合div。
谢谢
按要求提供更多信息：
所有的树图像都有相同的维数。
容器div的固定尺寸为500x300 px。
小中心div的固定尺寸为30x30px。
png本机分辨率为60x60px。
我创建了以下php脚本，但它既不处理空位置，也不精确地将图像插入div：
$forest1 = null;
for
浏览 2提问于2012-12-26得票数 1
问题1/2:我添加了一个可以在其他一些图像之间切换的图像，它在右侧添加了一个滚动条，即使页面右侧没有内容。我似乎不能摆脱滚动条。请参阅图1和图2。
问题2/2:当我将浏览器缩小时，文本不会停留在图像的中心。请参阅图3。
代码:我想在这里粘贴代码，但它总是出现缩进错误，所以你可以在www.mh-rp.com上查看页面，你可以在主标签和css部分的.centered中看到相关的代码。
图片：`
浏览 1提问于2019-10-27得票数 0
回答已采纳
1回答
子元素不包含在父标头中。
、、、
目标
保持父页面中包含的header__info，即使页面的方向发生变化，或者浏览器窗口的比例发生了变化。
问题
我有一个父标题，在上面我有一个子div .header__info，它包含关于项目的信息:年份、标题、描述和几个按钮。当您在浏览器中将页面缩放到125%时，例如，header__info header**.** 不停留在父中。
我已经尝试过通过切换height: 100vh的使用来修复标头的高度，然后使html、body和父header的高度达到100%，但这也不起作用。
/*----------------------------------
VARIABLES
浏览 2提问于2016-11-14得票数 1
2回答
我正在寻找一种解决问题的方法，我正在绘制一张用点表示的地图，但是我一直使用的是位置:相对位置；所以它从容器顶部开始计算左上角，但是现在我意识到它不是这样做的，它会向下移动，因为有几个“点”，我找不到解决这个问题的方法，有一个简单的方法吗？
预览:删除了点，用导弹(在海边)和右边的点看，它们都是在相同的高度上，但它们不是。
浏览 3提问于2012-04-16得票数 0
回答已采纳
1回答
带有简单侧边栏的粘性页脚
、、、
我有一台。我正尝试在页面底部添加一个粘性页脚。但是，当我切换导航栏时，页脚会跳到顶部。
<div id="wrapper" ng-class="{'toggled': hidden }">
<div ng-include='"views/nav.html"'></div>
<div id="page-content-wrapper">
<div class="container-fluid">
&
浏览 1提问于2014-10-04得票数 0
假设我有一个容器，我想把这个容器放到另一个容器中，这个容器也装满了其他东西。CSS代码可能如下所示：
.parent-container {
width: 100%;
position: relative;
}
.child-container {
width: 600px;
position: absolute;
left: 25px;
bottom: 100px;
}
然而，.child-container还包括绝对定位的元素，这些元素相对于.parent-container是位置的，因为.child-container没有position:
浏览 2提问于2013-08-28得票数 1
回答已采纳
我有一个应用程序，它在Chrome和FF中运行得相当完美，然而，当我在IE中查看它时，一切都很好，直到我点击一个标题元素来激活它(jQuery accordion)。
然后发生的是，我看到一个简短的闪光，内容在那里，然后突然整个左栏消失了。此列由一个类为".left“的浮动标签元素生成，如下所示……
<ul class="menu collapsible">
<li class='expand sectionTitle'><a href='#'>General Settings</a>
浏览 1提问于2010-03-18得票数 1
回答已采纳
我希望创建一个包含隐藏溢出的google地图的圆圈，不可能拖动
我认为剪辑路径属性是我所需要的，但它似乎是，你仍然可以处理外部剪裁形状的地图。与border-radius: 50%和overflow: hidden相同
这个问题有什么解决办法吗？
请查看这个简短的10s视频，以更好地理解我正在努力实现的
我不是想完全禁止拖曳。它应该只在圆圈内起作用。所以pointer-events: none帮不上忙
现场演示：
更新：在Chrome、火狐等浏览器中运行良好，但不适用
.contact-map
position: absolute
z-index: 9
top: 0
right
浏览 0提问于2018-02-21得票数 4
1回答
我试图在另一个父div中显示一个map div。
更具体地说，我希望<div id='map'></div>只出现在div id="mapbox"中。我遇到的问题是地图显示在包含div的id="mapbox"之外。页面上的其他地方一定有一些CSS导致地图显示不正确。
<div class="g12" id="mapbox" style="display:none">
<h1 style="padding-left:7px; paddi
浏览 2提问于2013-06-01得票数 0
回答已采纳
1回答
设置iframe对象的Z顺序
、、、、
我正在使用Javascript的菜单栏下拉子菜单。但这些下拉菜单显示在我的iframe对象下，并且不可见。如何将菜单的Z顺序设置为大于iframe？
你可以在这里看到一个例子。例如，应用程序菜单有4个子菜单项，但只有3个是可见的。
浏览 0提问于2011-04-26得票数 0
3回答
我很难解决这个问题:(我正在开发一个反应应用程序来训练自己。)
我的应用程序的基本结构如下所示：
<body>
<Component />
<AnotherComponent />
<AgainAnotherComponent />
...
</body>
所有这些组件都有一个css属性min-heigh: 100vh，以确保它们都具有设备的高度。
在其中一个组件中，我有一个位于absolute位置的元素，该元素具有css属性heigh: 100%。
默认情况下，当此元素的父组合位于“100vh高”时，没有什么问题，绝对子元素
浏览 4提问于2020-03-29得票数 2
2回答
我得到了一个项目列表，没有position: absolute，它们正确地呈现如下：
现在，我确实想设置position: absolute，将我的容器放在标题的顶部(其中写着"Sablier")。
然而，它隐藏了屏幕下面的元素：
我在容器上设置了z-index: 1000;，并确保容器上没有其他容器。怎么了？
备注：
只发生在iOS.上，我不想设置bottom: 0，因为列表可能会超出屏幕的高度。
浏览 0提问于2019-11-10得票数 0
1回答
我已经粘贴js小提琴链接下面，这个问题是#关于aboutmetoggle是出现在后面的#pic div和#行div是显示在前面的#图片。我需要#图片和#线显示#关于我的切换#。
它看起来很好，IE火狐和safari，但没有在铬。我已经检查过任何额外的或打开的标签，看不到任何东西，div是绝对定位的，并以正确的顺序出现。有人能帮上忙吗?这让我有点困惑……
在js小提琴上，#line看起来太过分了。显然这段代码搞砸了..。:-(
这个网站要求我在问题中放置代码，所以下面是页面的html，但它无论如何都在篡改:-)
<div id="container"><div
浏览 5提问于2013-10-28得票数 0
我在我的网站上使用了以下代码
<p>
<script type="text/javascript">
// <
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
