Question

我正在使用wordpress并正在处理主题。主题主机不允许我将html直接插入文件或让我使用ftp。我可以做到这一点的唯一方法是使用CSS。我正在努力使幻灯片显示在页面的顶部。默认情况下，主题使网站徽标出现在我不想要的顶部。

这是html

  <div id="page" class="site">
     <header id="masthead" class="site-header" role="banner">
     </header>
     <div id="content" class="site-content">
        <div id="primary" class="content-area">
           <article id="post-2" class="post-2">
              <header class="entry-header">
                 <h1>hello</h1>
              </header>
              <div class="entry-content">
                 <div class="metaslider">
                 </div>
              </div>
           </article>
        </div>
     </div>
  </div>

我需要这样做，以便类metaslider的div在页面中的所有其他内容之前出现。更具体地说，metaslider在masthead标头元素之前。我尝试使用position: realtive; top: -500px;，但它与我不想要的徽标重叠，我想向下推masthead并将metaslider放在其顶部。

Answer 1

尝试一下

<app-navbar></app-navbar>

<div class="container">
  <router-outlet></router-outlet>
</div>

让我知道这是否有效

Answer 2

我使用了以下样式信息，metaslider div对我来说移到了顶部。

.entry-header {
    position: relative;
    margin-top: 220px;
}
.metaslider {
    background: rebeccapurple;
    height: 200px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

请注意，由于我将metaslider设为绝对，因此必须给它一个宽度和高度以补偿空白内容，并且情况可能会因您而异。

为了测试其余内容，我将entry-header复制为entry-body，到目前为止，一切似乎都对齐了。

这是我更新的HTML和CSS：

<style>
  .entry-header {
    position: relative;
    margin-top: 220px;
  }
  .metaslider {
      background: rebeccapurple;
      height: 200px;
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
  }
</style>
<div id="page" class="site">
  <header id="masthead" class="site-header" role="banner">
  </header>
  <div id="content" class="site-content">
    <div id="primary" class="content-area">
      <article id="post-2" class="post-2">
        <header class="entry-header">
          <h1>hello</h1>
        </header>
        <div class="entry-content">
          <div class="metaslider">
          </div>
          <header class="entry-body">
            <h1>hi</h1>
          </header>
        </div>
      </article>
    </div>
  </div>
</div>

如何仅使用CSS更改html元素的位置？

2 个答案: