我这里有一个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>固定或绝对的位置来解决问题,但这会导致其他流量问题.
非常感谢您的帮助.
| 归档时间： |
|
| 查看次数： |
1260 次 |
| 最近记录： |