html - 添加新子元素后子元素的 top 值增加

标签 html css positioning

这就是我设计标题布局的方式

<div id="DivHeader">
<div id="DivTop">
</div>
<div id="DivBottom">
</div>
</div>

最初我将 DivBottom 的顶部属性设置为 35px。当时我没有 DivTop
所以现在,在添加它之后, DivBottom 的顶部已根据新子 (DivTop) 计算为 DivTop 的高度 + DivBottom 的顶部。结果布局像this一样折叠起来.我需要在不影响 DivBottom 的顶部 的情况下放置 DivTop,有什么想法吗?

[注意:我没有为我的 div 使用绝对定位,因为那样的话 margin:0 auto 将不起作用。]

最佳答案

您正在使用相对定位,这是预期的行为。查看W3 on relative positioning :

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning.

所以如果你在一个相对定位的元素之上插入一些东西,它会首先根据“正常流程”定位,然后根据你的 CSS 重新定位。

如果您想要指定的行为,您需要将 position 更改为另一个值。

关于html - 添加新子元素后子元素的 top 值增加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14181417/

相关文章:

css - 如何在html组合框中具有树状结构

css - 在纯 html 页面上定位 HTML5 Jquery 播放器

html - 如何获取表单的HTML和CSS

javascript - 使用 jquery Accordion 折叠仅在一个部分上工作

javascript - 通过 JavaScript 的 CSS : changing class "interrupted" by style change

javascript - 更改 Font Awesome 图标旋转并在悬停时缩放

css - 什么时候使用 hr 元素在语义上是正确的?

具有自定义 css 设计的 HTML 表格

html - 内容超出 div

css - iframe 在固定定位元素内的位置 (android)