html相对屏幕位置,position:absolute到底是相对于body定位还是屏幕啊

最新推荐文章于 2024-12-02 19:27:23 发布
最新推荐文章于 2024-12-02 19:27:23 发布
阅读量541 收藏
点赞数
文章标签： html相对屏幕位置
这篇博客探讨了CSS定位中的相对定位特性，特别是`bottom: 0`属性如何在浏览器滚动条上下文中工作。文章通过实例展示了当内容超过容器时，定位元素如何随滚动条动态变化，强调了理解元素相对于父容器定位的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

21daf08d9779566bc191d9e15b541c45.png

这是 定位到了浏览器的底部了啊,拖动滚动条,它又上去了,如下图

e5c48c737fe3201ab7badbcade39e473.png

没有父容器不是说相对于

定位 吗,上几节讲的,的最底部不是在最后一个

标签后面吗?

讲义原话是这样的...

838935df518db209926f2d0f92975bb3.png下面是代码

HTML>

relative样式

#div1{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

bottom:0;

right:0;

}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

靳晓楠
关注
跨浏览器的实践:position:fixed 层的固定定位
10-30
在网页设计中，实现元素的固定定位（Fixed Positioning）是一项常见的需求，它可以使元素相对于浏览器窗口保持固定的位置，无论用户滚动页面如何，该元素总是在屏幕的特定位置。`position: fixed` 是 CSS 中的一个...
CSS中的position:relative;的作用示例介绍
12-10
4. **fixed**：固定定位使得元素的位置相对于浏览器窗口或视口保持不变，即使页面滚动，该元素也会保持在屏幕上的特定位置。在某些旧版本的浏览器如IE5.5和NS6中可能不支持。 在你的场景中，你想要让`div#sub`相...
CSS中的position:absolute无父级默认相对于body还是html 引发的一系列思考
weixin_56330639的博客
06-27 696
关于position:absolute 绝对定位元素相对于最近的非 static 祖先元素定位。 当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。-----------------MDN官网 ICB（inital container block, 初始包含块） 关于包含块 什么是包含块：大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。 包含块的确定：确定一个元素的包含块的过程完全依赖于这个元素的 position
获取元素相对于屏幕的位置
weixin_30702413的博客
03-08 1044
<div class="div1"></div> <script> //返回值是一个包含width height top right bottom left, x , y的对象 var rect = document.querySelector('.div1').getBoundingClientRect() 　　...
CSS实现相对浏览器窗口定位
热门推荐
Allen专栏
03-08 2万+
Web Developer / Designer 经常需要将一个元素“固定”在页面的某个位置。例如弹出窗口、漂浮广告位等……本文将详细介绍简单CSS实现元素相对于浏览器窗口进行定位的方法。 position:fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 良好支持 W3C 标准
遮罩的跟随属性html,跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作...
weixin_39637179的博客
05-31 226
一、层跟随屏幕滚动层1层2.div1{background-color:#FF0000;width:2000px;height:2000px;}.div2{background-color:#33FF66;width:100px;height:100px;position:fixed;left:50px;top:50px;}(1)对文档、屏幕、层的一些jquery基本操作var showAdmin...
fixed定位既然相对于屏幕视口定位，为什么在滚动时不生效
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
03-19 1216
当你设置一个元素为fixed定位时，它的位置会相对于浏览器窗口的可视区域进行计算。因此，无论页面如何滚动，该元素都会保持在固定的位置上，不会随滚动而移动。fixed定位是一种CSS属性，用于将元素相对于浏览器窗口进行定位，而不是相对于其父元素。它会使元素固定在屏幕上的某个位置，不会随页面滚动而改变位置。示例，给搜索框固定在网页上方，但是在鼠标向下滚动时，搜索框会消失。这是内容区域的z-index比搜索框 默认的z-index大。给搜索框坐在样式加上较大的z-index即可。
css position: absolute、relative详解
10-30
而设置position: absolute的元素则完全脱离文档流，不再占据原始位置，并且使用top, bottom等属性进行绝对定位，其定位基准是相对于最近的已定位祖先元素或者初始包含块。 总结来说，position: absolute和position:...
能够实现相对于自己定位的属性设置是（ ）。 A position:relative; B position:absolute; C position:fixed; D position:none;
06-12
如果你想要元素相对于自己定位，并且不影响其他元素，那么相对定位（relative）是一个合适的选择。如果需要元素完全脱离文档流，且能根据浏览器窗口移动，那么绝对定位（absolute）可以满足需求。
position:relative/absolute无法冲破的等级
10-31
元素相对于最近的已定位祖先元素（指position不是static的父级）进行定位，若无则相对于body或html定位。元素脱离标准文档流，不影响其他元素布局。 #### 问题描述 假设有一个HTML列表结构如下： ```html 第一块...
定位(相对定位,绝对定位)
CYX_COMnn的博客
12-02 1534
定位是一种非常强大的功能,在书写页面时的应用也是非常广泛,熟练的应用定位,也会提高编写页面的效率。关于本篇文章没如果小编这里有遗漏或者是错误,请在评论区留言,这里也会及时补充纠正。
【CSS】CSS四种定位方式
Kangadd的博客
07-10 898
默认值，没有定位自动分配在一个合适的地方这种定位方式用margin来改变位置，对left、top、z-index等设置值无效不脱离标准文档流position：relative不脱离标准文档流不影响周围元素相对于自己的位置进行定位举例：红框中的父元素使用相对了定位，而它的子元素（图片、文字）则使用绝对定位相对定位和绝对定位一般都是一起出现，绝对定位需要相对定位作为参照物对自己定位一般我们会使用相对定位处理父元素，然后再用绝对定位对子元素进行处理，就可以在父元素内将子元素放到任意位置position：absol
在手机自带浏览器遇到的一个关于position的坑,absolute设置的位置没出现在预期...
weixin_34198797的博客
04-18 1115
结构是这样的 <div class="box"> <div class="content">something</div> <div class="inner"></div> </div> 样式是这样的 .box { position: relative;...
CSS布局之定位 详解（相对定位、绝对定位、子绝父相、固定定位）
Esther_liew的博客
05-26 2778
CSS布局--定位详解（相对定位、绝对定位、子绝父相、固定定位）
CSS学习总结（七）：静态定位、相对定位(relative)、绝对定位(absolute)、固定定位、 粘性定位、display 显示、overflow 溢出、visibility 可见性
weixin_62764364的博客
12-07 2983
我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。结论：要实现以上效果，标准流 或 浮动都无法快速实现所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。静态定位是元素的默认定位方式，无定位的意思。
CSS常用定位方法（绝对定位、相对定位、固定定位）
qq_57340195的博客
01-10 3963
CSS常用定位方法 1、绝对定位到屏幕中间 /*定位标签，不可定位文字*/ .DW{ position:absolute; top:50%; /*可以通过改变top的百分比，来改变上下的位置*/ left:50%; /*可以通过改变left的百分比，来改变左右的位置*/ transform:translate(-50%,-50%); /* 可设置其它样式，如
浏览器滚动条滚动到某一位置的时候，页面中的按钮设置为position: fixed
xiehuanqing00的专栏
10-02 907
由于页面内容长，导致滚动浏览器滚动条的时候操作按钮不知道在哪个位置，这时候需要把操作按钮固定到页面中，或者在按钮即将消失的时候设置为position: fixed来保证按钮可见。这是一个常见的页面优化方案。
关于使用了position定位页面底部留白和高度不能被撑起来的问题
一枚不断学习的小码农一枚~
04-12 7181
关于使用了定位页面底部留白和高度不能被撑起来的问题 页面的效果图应该是这样的，section会遮盖一些banner，footer位于文档的底部（不需要定位在屏幕底部）。 所以一开始我把section footer放在一个元素中，为其父元素加了position: relative;为他们各加了position:aboslute,但是页面底部出现了留白情况，因为absolute就脱离了文档流，不能完...
position: fixed还是相对于父盒子定位
最新发布
07-23
引用[4]展示了一个例子，其中子元素使用absolute定位，而不是fixed，来实现相对于父元素固定（在父元素滚动时保持位置不变）。而引用[5]中的例子直接对子元素使用fixed，但这样它就会相对于视口定位，而不是父元素。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值