Question

我有一个包含文本的div绝对位于包含图像的相对div内。我正在设计流畅的布局。作为标题文本的想法以一致的位置出现在图像上。

我有两个问题。第一个是如果我在文本div上设置高度0，它应该与图像div的顶部对齐。但是，它超过了这个文档的顶部。我无法弄明白为什么，我虽然绝对的div，但却是第一个相对的div。

第二个问题是当我更改图像div /浏览器的宽度时，垂直位置会发生变化。因此，在浏览器最宽处，标题文本的顶部开始在标题图像的第8位。当我减小浏览器大小时，标题文本的顶部开始向图像div的顶部爬行，甚至可以超过顶部菜单。标题文本和标题图像大小都基于宽度，因此应保持不变。

感谢您的帮助。

HTML
<div class="header_image">
<img src="/photos/<?php echo $row1['cover']; ?>.jpg" style="width:100%;" alt="banner">

<div unselectable="on" class="header_text">
  <h1 class="voyage_to" style="text-shadow: 0 0 0.2em <?php echo $colour; ?>, 0 0 0.2em <?php echo $colour; ?>;">xxxxxxxx</h1>
  <h1 class="bold_title" style="text-shadow: 0 0 0.2em <?php echo $colour; ?>, 0 0 0.2em <?php echo $colour; ?>;"><?php echo $row1['name']; ?></h1>
</div>

</div>

CSS

.header_image{
width:100%;
position:relative;
}

.header_text {
    line-height:1;
position: absolute;

top:20%;
left:0;
right:0;
margin:0 auto;

z-index: 1;

   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

}

绝对定位高度

0 个答案: