绝对定位bottom值为0的位置问题

有一个position值为absolute的div,他的祖先元素里没有任何定位属性,或者他的父元素就是body。 当这个div的bottom值为0的时候,他应该被定位到哪个位置? 这个大家都知道在最下面。 现在条件稍微修改一下,给body和html一个height的值,给大一些,就10000px吧。 现在这个div的位置应该在哪?

就像下面的代码,这个div依然被定位在了屏幕的底部,和fixed值“一样”的表现。只不过这个“一样”是暂时的,拖动滚动条就露底了,div滚动了上去,死死的定位在了第一屏底部的位置。

<!DOCTYPE html>

<html>

<head>

<title>绝对定位bottom值为0的位置问题-caihong.cc</title>

<style>

*{

margin: 0;

padding:0;

}

html,body{

height: 10000px;

}

.position-el{

width: 100px;

height: 100px;

background: #ff0;

position: absolute;

bottom: 0;

}

</style>

</head>

<body>

<div class="position-el"></div>

</body>

</html>

提示:你可以先修改部分代码再运行。

应该不少同学都知道这个表现,我问过几个朋友,他们也知道绝对定位的元素bottom为0的时候会定位到屏幕底部。但是细问原理的时候都没能讲出来。

为什么他没有定位到文档的最底部?

我跑到w3.org从absolute属性开始扒。

9.6 Absolute positioning In the absolute positioning model, a box is explicitly offset with respect to its containing block.

传送门

这一条刚入门的时候就知道,绝对定位的元素相对于他的包含块位移。现在的问题是div的包含块是谁,于是我继续去扒包含块。

10.1 Definition of “containing block” The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows: 1.The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The ‘direction’ property of the initial containing block is the same as for the root element.

传送门

运气真好,第一条信息就很足了,根元素所在的 containing block 被称为 initial containing block,大小和 viewport 相同,原点与 canvas 重合。

到这里好像答案已经出来了,不过我还是顺着paged media继续多扒了一点

13.2 Page boxes: the @page rule The page box is a rectangular region that contains two areas: The page area. The page area includes the boxes laid out on that page. The edges of the first page area establish the rectangle that is the initial containing block of the document. The canvas background is painted within and covers the page area. The margin area, which surrounds the page area. The page margin area is transparent.

现在才算是把bottom:0 的定位问题逐步弄清楚了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

初学者必知的HTML规范

942
来自专栏DannyHoo的专栏

摆图片确定行数

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

542
来自专栏HTML5学堂

WEB前端项目开发中需注意的细节

WEB前端项目开发中需注意的细节 HTML5学堂:在WEB前端开发当中,书写基本的代码固然重要,而细节也是不容忽略的。在本文当中,我们整理了书写HTML与CSS...

3048
来自专栏mySoul

通过css类/选择器选取元素 文档结构和遍历 元素树的文档

尽管如此,js还定义了一个方法,即一个getElementsByClassName(),是基于class属性值中的标识符来选取成组的文档元素

562
来自专栏向治洪

React Native控件之Listview

ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。 ListView更适于长列表数据,且元素个数可以增删。和ScrollVie...

1679
来自专栏weixuqin 的专栏

Scrapy选择器的用法

34212
来自专栏lhyt前端之路

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局(重要)4. 重绘与重排(重要)5. paint(绘制)6. composite(重要)7. 浏览器加载

身为前端,打交道最多的就是浏览器和node了,也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程,......,我们直接来到收到...

912
来自专栏GreenLeaves

JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务...

3896
来自专栏全沾开发(huā)

总结CSS3新特性(Transiton篇)

总结CSS3新特性(Transiton篇) CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS ...

3456
来自专栏前端真相

css(1)

1 z-index就是网页的z轴,用相对定位绝对定位把两个层重叠在一起,z-index的值越大,就越靠上,注意,z-index没有单位,z-index:99;这...

2719

扫码关注云+社区