Html 为什么我的潜水艇被推倒了？

我正在尝试将

白色

框、

topBoxFlag

向上移动到其父

topBox

的顶部。但是，由于相对布局的原因，它被压到了红色框的下方。我怎样才能把它往上推？我尝试了一个绝对布局，但决定这不会工作，因为它会发生在我所有的其他盒子，我觉得这将是非常低效的。是否有类似于

float

的东西可以将其直接推到其父级的顶部

正文
{
背景色：#C6E0F5；
}
#包装纸
{
位置：相对位置；
保证金：自动；
宽度：1000px；
高度：2900px；
最大宽度：1000px；
背景色：#C6E0F5；
}
#标题
{
位置：相对位置；
宽度：100%；
高度：170px；
背景色：#00247D；
}
#导航栏
{
位置：相对位置；
宽度：自动；
底部：20px；
高度：35px；
文本对齐：居中；
背景色：#CF142B；
}
#纳瓦尔里酒店
{
列表样式类型：无；
填充：20px；
文本对齐：居中；
字体系列：“投石机MS”；
字体大小：25px；
显示：内联；
}
#navbar ul li a
{
文字装饰：无；
字体大小：粗体；
颜色：#fff；
}
.机顶盒
{
高度：400px；
宽度：800；
保证金：自动；
背景色：#00247D；
}
.机顶盒h1
{
字体大小：35px；
字体系列：“投石机MS”；
文本对齐：居中；
颜色：#fff；
宽度：500px；
背景色：#CF142B；
}
.topbox#topboxFlag
{
浮动：对；
宽度：300px；
高度：400px；
背景色：#fff；
}
.聚会箱
{
高度：400px；
宽度：800；
保证金：自动；
背景色：#00247D；
边缘顶部：15px；
}
.partybox h1
{
字体大小：35px；
字体系列：“投石机MS”；
文本对齐：居中；
颜色：#fff；
宽度：500px；
背景色：#CF142B；
}

了解哪些政党在做什么






保守党
工党
自由民主党
英国独立党
绿党
苏格兰国家党

只需在样式表中再添加一个css即可

.topbox h1{
    margin:0;
    float: left;
}

由于您的

topboxFlag

类有一个浮动，您还应该将浮动添加到标题中

正文{
背景色：#C6E0F5；
}
#包装纸{
位置：相对位置；
保证金：自动；
宽度：1000px；
高度：2900px；
最大宽度：1000px；
背景色：#C6E0F5；
}
#标题{
位置：相对位置；
宽度：100%；
高度：170px；
背景色：#00247D；
}
#导航栏{
位置：相对位置；
宽度：自动；
底部：20px；
高度：35px；
文本对齐：居中；
背景色：#CF142B；
}
#纳瓦尔里酒店{
列表样式类型：无；
填充：20px；
文本对齐：居中；
字体系列：“投石机MS”；
字体大小：25px；
显示：内联；
}
#navbar ul li a{
文字装饰：无；
字体大小：粗体；
颜色：#fff；
}
.机顶盒{
高度：400px；
宽度：800；
保证金：自动；
背景色：#00247D；
}
.机顶盒h1{
字体大小：35px；
字体系列：“投石机MS”；
文本对齐：居中；
颜色：#fff；
宽度：500px；
背景色：#CF142B；
}
.topbox#topboxFlag{
浮动：对；
宽度：300px；
高度：400px；
背景色：#fff；
}
.聚会箱{
高度：400px；
宽度：800；
保证金：自动；
背景色：#00247D；
边缘顶部：15px；
}
.partybox h1{
字体大小：35px；
字体系列：“投石机MS”；
文本对齐：居中；
颜色：#fff；
宽度：500px；
背景色：#CF142B；
}
.机顶盒h1{
保证金：0；
浮动：左；
}

了解哪些政党在做什么










保守党
工党
自由民主党
英国独立党
绿党
苏格兰国家党

您能先将flag div设置为空吗

<div class="topbox">
    <div id="topboxFlag></div>
    <h1>The Conservative Party</h1>
</div>

你能把它放到JSFIDLE中吗？@BigRabbit更好的是，一个堆栈片段。