Question

我可能在这里遗漏了一些明显的东西，但这让我疯狂。

标题ID相对定位，我正在尝试将元素置于其中（两个人的照片和这些照片旁边的文字，＃bodyad1和＃bodyad2）。
问题是，他们拒绝工作，并最终完全定位在#header 之外，相对于身体。

奇怪的是我已经将另一个元素放置在标题内并且它可以正常工作（功能区的照片）。但是，当我插入其他两个元素时，标题就会中断：所有标题内容都会移到页面底部。

有什么想法吗？

<div id="bodyad1">
    <img src="images/person1.png" alt="">
    <div id="bodyad1-text">
        <h3>—Featured Story—</h3>
        <p>John Smith</p>
        <h2>Toronto Criminal Lawyer</h2>
</div>

<div id="bodyad2">
    <img src="images/person2.png" alt="">
    <div id="bodyad2-text">
        <h3>—Featured Story—</h3>
        <p>John Smith</p>
        <h2>Toronto Criminal Lawyer</h2>
    </div>
</div>

<div id="adlogo">
    <img src="images/advocatedaily-logo.png" alt="Advocate Daily dot com Logo">
    <h2>Ontario's Legal News</h2>
</div>
 <div id="adsash"></div>

<div class="clear"></div>

CSS（是的，我知道我可以让我的风格更简洁）

/*header*/
#header {
  display: block;
  border-bottom: 1px solid #9e0505;
  position: relative;
}
/*   Featured Lawyer Body Shots   */

#bodyad1 {
    display:block;
    position: absolute;
    width: 220px;
    height: 94px;
    bottom: 0px;
    left: 60px;
}

#bodyad2 {
    display:block;
    position: absolute;
    width: 220px;
    height: 94px;
    bottom: 0px;
    right: 60px;

}

#bodyad1 img{
    float:right;
    display:block;
}

#bodyad1-text {
    height:94px;
    float:right;
}

#bodyad1-text  h3 {
    font: italic 10px helvetica, arial, sans-serif;
    color: #666;
    text-align: right;
}

#bodyad1-text  p {
    font: normal bold 11px helvetica, arial, sans-serif;
    text-transform: uppercase;
    color: #cd1713;
    text-align: right;
}

#bodyad1-text  h2 {
    font: normal bold 11px helvetica, arial, sans-serif;
    color: #666;
    text-align: right;
}

#bodyad2 img {
    float:left;
    display:block;
}

#bodyad2-text {
    height: 94px;
    float: left;
}

#bodyad2-text  h3 {
    font: italic 10px helvetica, arial, sans-serif;
    color: #666;
    text-align: left;
}

#bodyad2-text  p {
    font: normal bold 11px helvetica, arial, sans-serif;
    text-transform: uppercase;
    color: #cd1713;
    text-align: left;
}

#bodyad2-text  h2 {
    font: normal bold 11px helvetica, arial, sans-serif;
    color: #666;
    text-align: left;
}

Answer 1

原来我错过了一个结束div标签，但由于我的缩进风格，我看起来确实关闭了它。

发布相当荒谬的事情。继续。

谢谢@pebbl。

在相对定位的元件内的绝对定位拒绝工作

1 个答案: