没有指定顶部、右侧、底部、左侧等的绝对定位元素的行为

发布于 2024-10-22 00:35:05 字数 141 浏览 4 评论 0原文

给定一个设置了高度和宽度并设置了位置:绝对的 dom 元素,如果该元素没有指定任何定位(如顶部、右侧、底部和左侧属性),是否有可预测的定位?位置默认为 left:0, top:0 吗?或者元素是否保留在页面上最初的位置?

或者不同浏览器的定位是否不同?

Given a dom element that has set height and width, and is set position:absolute, is there a predictable positioning for the element if it doesn't have any positioning specified (like top, right, bottom, and left properties)? Does the position default to left:0, top:0? Or does the element stay where it originally was positioned on the page?

Or does the positioning differ from browser to browser?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

っ左 2024-10-29 00:35:05

这是一个使用 jsfiddle 的示例。
http://jsfiddle.net/hPJa8/

大多数浏览器似乎将元素定位在其自然位置,但随后后续元素在放置到页面上时不会考虑绝对定位元素。这会导致后续元素重叠。

Here is an example using jsfiddle.
http://jsfiddle.net/hPJa8/

Most browsers seem to position the element in its natural position, but then subsequent elements will not take into account the absolutely positioned element when they are placed onto the page. This results in the subsequent elements overlapping.

戏蝶舞 2024-10-29 00:35:05

如果元素的位置是静态的,则元素的左上角保持在原来的位置。不幸的是,这不是一个严格的定义。

以图像为例。我们会将其视为内联元素还是块元素? (大多数浏览器都说内联)。我们是否应该考虑图像引起的断行? (大多数浏览器的行为就好像它的大小为零。)我们应该将它垂直放在哪里?选项有:在行的顶部、在基线、在当前字体高度、在图像高度;添加跨度会增加选择。据我所知,IE 回答这个问题的方式最近发生了变化。

因此,请注意不同浏览器之间的差异。

The top left corner of the element stays where it would be if the position of the element was static. Unfortunately, it is not a strict definition.

Take an image as an example. Would we consider it as an inline or block element? (Most browser say inline). Should we consider line break caused by image? (Most browser act as if it's size is zero.) Where should we put it vertically? Choices are: at the the top of the line, at the baseline, at current font height, at image height; adding spans adds choices. The way IE answers this question changed recently AFAIK.

So, do expect differences from browser to browser.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文