CSS

Question

I've got a bit of a CSS headscratcher here. It appears I managed to get myself into a position where the absolute position of an element is affected by one of its siblings descendants.

The premise is the following: I have a <head> container with two child elements <span> and <div>. The <head> element is relatively positioned. The <span> is absolutely positioned, the <div> is relatively positioned. The objective is to have the <span> absolutely positioned at top:0px with the <div> overlapping it. It appears however that a margin is created by one of the decendats of the <div> element.

This has me scratching my head. I'm hopeful that someone can assist.

Here's a CodePen.io example of what I'm talking about.

 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>

I realize that I can make the problem go away by setting the position of the <div> to something like fixed or absolute but that causes other flow issues.

Your help is appreciated.

Lighty_46 · Accepted Answer

Add display: inline-block; to the header element and it should sort it.

CSS - Absolutely positioned element affected by margin of sibling?

Tags:

html

alfred_j_kwack

1 Answers

Lighty_46

Recent Activity

Donate For Us