Html 使项目不受css影响，但让它影响其他项目

这似乎是一个奇怪的问题：我有一张图片想用作标题。我的整个网站以

垂直对齐：居中为中心，但我希望标题图像位于屏幕顶部。我知道我必须对图像使用
position:relative
或
position:absolute
，然后添加
vertical align:top
。如果我尝试相对，图像将保持居中，但当我尝试绝对时，页面上的文本与图像重叠。我正在为这个项目使用Bootstrap和
fullscreen.js
。我需要将图像放在屏幕顶部，同时向下推其他内容。提前谢谢

<div id="fullpage">
    <div class="section">
        <img id="header1"src="http://placehold.it/1980x720&text=home" class="img-responsive hidden-print hidden-xs" style="position:absolute; vertical-align:top; top:60px;">
        <br />
        <br>
        <h1>Test</h1>
    </div>
<div>






测验

#整页
{
垂直对齐：居中；
填充顶部：273px；/*…标题图像的高度*/
}
部分
{
}
#校长1
{
位置：绝对位置；
顶部：60px；
左：0；
宽度：100%；
}





测验
您应该在整版div中使用单独的div将标题图像与内容分开。
将绝对位置添加到标题容器，将顶部填充添加到内容容器。
如果需要将绝对定位的收割台居中，则仍需要计算中心偏移


在正文中添加图像高度的边距，以向下推整页div。当图像为绝对值且顶部为0时，它将位于边距内

在整页中添加一个填充，即图像的高度，以向下推整页div。当fullpage是相对的，图像是绝对的，它将位于填充中


*{
垂直对齐：居中；
}
#整版{
边框：1px纯红；
填充顶部：100px；
宽度：400px；
位置：相对位置；
}
#校长1{
位置：绝对位置；
垂直对齐：顶部；
排名：0；
}





测验
使用
“位置：绝对”
对图像和
页边距顶部：200px
对其他内容我尝试过这样做，但我将图像设置为在较小的视图上隐藏，并且它是自适应的。@depperm查看我所做的编辑made@DaniM.Smith然后也可以删除小视图上的边距，对吗？将
position:relative
添加到
#fullpage
或
.section
中，具体取决于您希望图像相对于什么。如果运行代码段，您可以看到它正在将文本推到标题下方。如果你的问题是标题大小可变，这很容易解决。我明白了。fullscreen.js或Bootstrap中一定有什么东西阻止它工作。它不工作，因为fullpage.js修改了生成的DOM结构。他必须给我们提供一个JSFIDLE或codepen的复制品。它没有移到顶部，不幸的是，我在问了这个问题后很快就删除了那些标签，但它仍然不起作用。我已经更新了我的答案。我假设您希望此标题位于页面顶部，而不是与整页一起滚动。如果我和其他人的建议到目前为止没有帮助，您可能需要提供一个行为的屏幕截图。它不起作用，因为fullpage.js修改了生成的DOM结构。他必须用jsfiddle或codepen向我们提供复制品。@Alvaro我如何将fullscreen.js库包含到jsfiddle中？标题必须在fullscreen div中。我使用的是fullscreen.js（）@DaniM.Smith。现在它被更改为适合fullpage div。
<div class="section">
    <div id="header-container">
        <img src="http://www.speakdolphin.com/images/headerBar.png" id="header1"/>
    </div>
    <div id="content-container">
        <p>This is some text</p>
    </div>
</div>

function centerAbsolute(){
    var headerWidth = $('#header1').width();
    var pageWidth = window.innerWidth;

    var centerOffset = (pageWidth - headerWidth) / 2;

    $('#header1').css({left: centerOffset});
}