在一个页面中重叠两个单独的 div

【问题标题】：Overlap two separate div in a page在一个页面中重叠两个单独的 div
【发布时间】：2020-03-28 10:31:05
【问题描述】：

我正在尝试使用按钮和面板构建页面。该代码以可重用的方式构建，因为此按钮将在多个页面中使用。然而，在一个特定的页面中，我们有一个显示信息的面板，现在他们想在面板标题中显示这个按钮。谁能帮我使用 CSS 将这两个 div 合并到一个单独的页面中。

当前：

期望：

按钮代码：

<div>
  <p class=""><span class="fa fa-star"></span>Mark Read</p>
</div>

面板代码：

<div class="container">

  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap-3 bootstrap-4 angular-ui-bootstrap

【解决方案1】：

您可以将其移到标题中并删除 div

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="panel panel-default">

    <div class="panel-heading">
      <p class=""><span class="fa fa-star"></span>Mark Read</p>Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

【讨论】：

感谢您的回复，但我被指示不要触摸面板代码，而是使用纯 CSS 将这两个部分重叠
@akrishna wow... 您想仅使用 CSS 将来自两个不同页面的两个 html 元素合并到一个新页面中吗？
@AlbertoRhuertas，如果可能的话是的。我不确定这是否可能，但我的任务是实现这一点并寻求帮助来完成
@akrishna 如果我是对的，那么 CSS 是不可能的。你可以用 javaScript 来做。