Question

我这里有一个CSS headscratcher。看来我设法让自己进入一个元素的绝对位置受其兄弟姐妹后代影响的位置。

前提是：我有一个<head>容器，其中包含两个子元素<span>和<div>。 <head>元素位于相对位置。 <span>绝对定位，<div>相对定位。目标是让<span>绝对位于顶部：0px与<div>重叠。然而，似乎由<div>元素的一个后代创建了一个边距。

这让我摸不着头脑。我希望有人可以提供帮助。

以下是我所谈论的CodePen.io示例。

 body {
   margin: 0;
 }
 h1 {
   font-size: 2em;
   margin: .67em 0;
 }
 p,
 pre {
   margin: 1em 0;
 }
 header {
   height: auto !important;
   min-height: 265px;
   position: relative;
   width: 100%;
   max-height: 638px;
   overflow: visible;
   z-index: 1;
 }
 header > #abstract {
   padding: 0 5%;
   width: 100%;
   position: relative;
   left: 0;
   bottom: 0;
   z-index: 3;
 }
 header > span.featured-img {
   top: 0em;
   min-height: 265px;
   position: absolute;
   overflow: hidden;
   height: 100%;
   z-index: 1;
 }

<html>

<body>
  <header>
    <span class="featured-img"><img src="http://placehold.it/300x100" alt="featured image" title="{featured image}"/></span>

    <div id="abstract">
      <h1>article header h1</h1>
      <div id="meta">Published:
        <time pubdate datetime="2009-10-09">9th October, 2009</time>by <span class="author"><a href="#" rel="author">John Doe</a></span> in <span "categories">Consectetur</span>
      </div>
      <p class=>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
    </div>
  </header>
</body>

</html>

我意识到我可以通过将<div>的位置设置为固定或绝对的位置来解决问题，但这会导致其他流量问题。

感谢您的帮助。

Answer 1

将display: inline-block;添加到header元素，然后对其进行排序。

Answer 2

div中的<h1>有一个上边距。摆脱它。 margin:0 0.67em 0。

body {
  margin: 0;
}
h1 {
  font-size: 2em;
  margin: 0 0.67em 0;
}
p,
pre {
  margin: 1em 0;
}
header {
  height: auto !important;
  min-height: 265px;
  position: relative;
  width: 100%;
  max-height: 638px;
  overflow: visible;
  z-index: 1;
}
header > #abstract {
  padding: 0 5%;
  width: 100%;
  position: relative;
  left: 0;
  bottom: 0;
  z-index: 3;
}
header > span.featured-img {
  top: 0em;
  min-height: 265px;
  position: absolute;
  overflow: hidden;
  height: 100%;
  z-index: 1;
}

<header> <span class="featured-img"><img src="http://placehold.it/300x100" alt="featured image" title="{featured image}"/></span>

  <div id="abstract">
    <h1>article header h1</h1>

    <div id="meta">Published:
      <time pubdate datetime="2009-10-09">9th October, 2009</time>by <span class="author"><a href="#" rel="author">John Doe</a></span> in <span "categories">Consectetur</span>

    </div>
    <p class=>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
  </div>
</header>

CSS - 完全定位元素受兄弟边缘的影响？

2 个答案: