html - div不在它应该在的地方

<分区>

我一直在尝试获得 <div>留在另一个<div>的底部, 但到目前为止它只到达浏览器的底部 - 而不是 <div> 的底部.这是我试过的代码:

<div id="header">


<div style="position: absolute;bottom: 0;left: 0;height: 15;text-align: left;width: 100%;background: url(images/btrans.png);"><b>Driftsmelding: </b><font style="color: #88d327;"></font></div>
</div>

和CSS部分

#header {
    background: url(images/logo_oslo.jpg);
    background-position: 0px -12px;
}
#header {
    background: url(images/logo.jpg);
    background-position: 0px -12px;
    margin: 25px auto 0px auto;
    width: 1092px;
    height: 140px;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background-color: #333333;
    padding-left: 8px;
    padding-top: 0px;
    padding-right: 0px;
    box-shadow: 0px 0px 16px #000;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

有人知道问题出在哪里吗？我很确定我应该使用位置 absolute .

最佳答案

只需将 position: relative; 添加到 #header 参见 fiddle https://jsfiddle.net/sxh0n7d1/2/

#header {
    background: url(images/logo_oslo.jpg);
    background-position: 0px -12px;
    position: relative;
}

这里很好地解释了 relative 和 absolute 之间的区别 Position Relative vs Position Absolute?

关于html - div不在它应该在的地方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39151126/

上一篇：javascript - 使用带有语音输入的特定词来更改背景图像

下一篇：html - rails : Use different-sized text areas within a single form

html - 交换 div @media 屏幕

jquery - Cycle2 幻灯片故障，其中图像将与下方的 DIV 随机重叠

html - 如何在不移动到下方的情况下将列从三列减少到两列 - bootstrap

javascript - 在可变高度图像的特定区域上定位 div

php - 创建多个 Wordpress 类别 div

javascript - 元素之间的动画延迟

jquery - 使用数据表自定义分页

html - CSS body 背景位置右下角不起作用

javascript - 如何在 HTML5 视频标签中播放 F4V 视频