绝对定位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 条评论
登录 后参与评论

相关文章

来自专栏opengps

新手入门百度地图开发的(0,0)坐标问题

        对于大部分人来讲,由于百度地图资料众多,过度依赖搜索引擎等等原因。新接触百度地图开发工作其实并不容易。今天说说关于坐标(0,0)的问题。 ...

3659
来自专栏opengps

新手入门百度地图开发的(0,0)坐标问题

        对于大部分人来讲,由于百度地图资料众多,过度依赖搜索引擎等等原因。新接触百度地图开发工作其实并不容易。今天说说关于坐标(0,0)的问题。 ...

3316
来自专栏Nian糕的私人厨房

HTML 基础

超文本标记语言 (HTML, HyperText Markup Language) ,是构成网页的最基础的内容,用来创建并以可视化方式来呈现网页,它确定了一个网...

753
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

2754
来自专栏非著名程序员

拖拽,自由组合,让你的开发更加简单,用户更方便

今天给大家推荐一个自由拖拽,自由组合的控件,这个控件是我自定义写的。通过它,我们可以自由拖拽,自由组合实现一个界面,满足一个用户自由组合界面的需求。这里不是通过...

1886
来自专栏前端知识分享

第84天:jQuery动态创建表格

601
来自专栏阮一峰的网络日志

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度...

3697
来自专栏IMWeb前端团队

简述tabs react组件的简单实现

在DOM操作时代,tabs的结构一般如下: div.tabs ul.tabs-hd li.hd-tt*n div.tabs-b...

26210
来自专栏吾爱乐享

php学习之div+css标准化布局(一)

1322
来自专栏小狼的世界

em是否到了退出的时候

今天看到 YUI CSS 框架中的时,看到用了其用来表示宽度的时候,很多地方都用了 em,在调整字体大小的时候,用了百分比。官方的说法是这样的:

542

扫码关注云+社区