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

相关文章

来自专栏超然的博客

react小结

在react中,父组件给子组件传递数据时,就是以上的方式,通过给子组件设置props,子组件获取props中的值便可完成数据传递。 

861
来自专栏吾爱乐享

php学习之html小结1

1063
来自专栏达摩兵的技术空间

js事件委托

事件委托也叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

752
来自专栏从零开始学自动化测试

Selenium2+python自动化73-定位的坑:class属性有空格

前言 有些class属性中间有空格,如果直接复制过来定位是会报错的InvalidSelectorException: Message: The given s...

3714
来自专栏技术博客

Knockout.Js官网学习(value绑定)

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

581
来自专栏GreenLeaves

JavaScript之向文档中添加元素和内容的方法

一、非DOM方法添加 1、document.write() <html xmlns="http://www.w3.org/1999/xhtml"> <head>...

1717
来自专栏黑泽君的专栏

day41_jQuery学习笔记_02

下面是jQuery 提供额外的事件,用于完善javascript缺失的事件 详解如下:

962
来自专栏java达人

javascript之BOM

一、BOM(The Browser ObjectModel):-浏览器对象模型, (1)BOM提供了独立于内容而与浏览器窗口进行交互的...

2018
来自专栏python3

tkinter -- Event(3)

当按键为 Return 时,由 printReturn 来处理,即由最“近”的那个事件处理

842
来自专栏liulun

自己动手写客户端UI库——事件机制(设计思路大放送)

在上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上, 在这一篇文章中,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 ...

2019

扫码关注云+社区