CSS - Absolutely positioned element affected by margin of sibling?
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.
2 answers
solution1
6 ACCPTED 2014-12-16 17:25:40
Add display: inline-block; to the header element and it should sort it.
solution2
0 2014-12-16 17:26:57
The <h1> in the div has a top margin. Just get rid of it. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.