如何防止元素在CSS中推送另一个元素？

Question

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

这就是我的目标。

下面是截图：

看看红色三角形是如何在我的页面标题中向下推动图片，创建那条暗色带？我想要将红色三角形（.flag）叠加在图片的顶部，就像它像丝带一样悬挂在它上面。

我不确定你需要看到的所有代码，但这里是三角形（.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

如果没有给出太多代码，我的第一个猜测是应用position: relative; bottom: 50px;（假设图片被按下50px，你应该根据需要改变）到包含图片/所有东西的任何元素。然后，在功能区上放置一个z-index: 100，使其位于图片的顶部。

Answer 2

您需要绝对定位.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;
}

Answer 3

如果以上解决方案均无效，请尝试此操作。

将position: absolute;和right: 0px;添加到功能区容器

然后将position: relative添加到父级div，该中心对齐标题栏中的所有内容。