html - 如何防止一个元素插入 CSS 中的另一个元素？

Question

我是 CSS 定位的新手，正在努力学习...这也是我在这里提出的第一个问题。 =)

这是我正在做的事情。

截图如下:

看到红色三 Angular 形如何将​​我的页眉中的图片向下推，形成深色条纹了吗？相反，我希望红色三 Angular 形 (.flag) 覆盖在图片的顶部，就像它像丝带一样悬在上面。

我不确定您需要为此查看哪些代码，但这是三 Angular 形 (.flag) 的 CSS:

.flag {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-top: 60px solid $red;
    float: right;
    margin-right: 40px;
    padding: 1px;
}

HTML

    <div class="new visible-l">
        <a href="#">
            <h3>NEW?</h3>
            <p>Click here to learn more!</p>
        </a>
    </div>

    <h1 class="logo"><a href="#">The Quigley Inn</a></h1>

    <ul>
        <li><a href="#">Logs</a> |</li>
        <li><a href="#">Bulletin</a> |</li>
        <li><a href="#">Locations</a> |</li>
        <li><a href="#">Directory</a> |</li>
        <li><a href="#">Policies</a> </li>
        <li class="hidden-l">| <a href="#" class="newhidden">New?</a></li>
    </ul>

    <div class="flag visible-l"></div>

</section>

<section id="content">
<section id="pageheader">

    <img src="http://placekitten.com/1200/400" />

    <h1>The Quigley Inn</h1>

</section>

Answer 1

您需要绝对定位 .flag 元素，然后使用 top 和 right 属性定位它，如下所示:

.flag {
     width: 0;
     height: 0;
     border-left: 80px solid transparent;
     border-right: 80px solid transparent;
     border-top: 60px solid red;
     position: absolute;
     right: 40px;
     top: //insert appropriate value
}

另一种解决方法是使用具有负值的 margin-top 简单地将猫图像/div 向上移动，例如margin-top: -10px。

更新:

请将下面的 CSS 添加到您的样式表中:

section#pageheader img {
     margin-top: -50px;
}

.flag {
     z-index: 9999;
}