我主页上的相对位置 - 角度 12

【问题标题】：relative position on my homepage - angular 12我主页上的相对位置 - 角度 12
【发布时间】：2022-06-18 00:38:49
【问题描述】：

我的网站有问题，当我设置我的主页位置时：relative，我可以将我的网站左右推送，我需要修复它。但是当我改变 position:absolute 时，我的问题就消失了，但是我在主页上遇到了 H1 的问题，因为当我在移动版本中向下滚动导航栏时，H1 没有响应并通过导航栏。

当我设置位置时：相对 https://i.stack.imgur.com/to8Yf.jpg

当我设置位置时：绝对 https://i.stack.imgur.com/jUPZy.jpg

我的代码：

HTML：

`<div class="banner">
  <div class="content">
    <h1 class="mb-5">Čerstvé koláče <br/> priamo k tvojim dverám</h1>
    <a routerLink="menu">Objednaj teraz! <i class="bi bi-arrow-right"></i></a>
  </div>
</div>
<!-- step -->
<div class="container mt-5 mb-5">
  <h1 class="text-center">Ako získať <span class="highlight">čerstvé koláče</span></h1>
  <div class="row mt-3">
      <!-- one -->
      <div class="col-lg-4 mt-2">
        <div class="stepBox">
          <h1>1</h1>
          <p>vyberte koláč</p>
        </div>
      </div>
      <!-- two -->
      <div class="col-lg-4 mt-2">
        <div class="stepBox">
          <h1>2</h1>
          <p>vyplnte podrobnosti</p>
        </div>
      </div>
       <!-- three -->
      <div class="col-lg-4 mt-2">
        <div class="stepBox">
          <h1>3</h1>
          <p>doručenie vašej objednávky</p>
        </div>
      </div>
  </div>
</div>

<!-- cakebox -->
<div class="container mt-4 mb-4">
  <h1 class="text-center">Obľúbené produkty</h1>
  <div class="row">
    <div class="col-lg-3 mt-3" *ngFor="let ck of cakeData; index as i">
        <div class="cakebox" *ngIf="i<=3">
          <img src="{{ck.cakeImg}}" />
          <h1>{{ck.cakeName}}</h1>
          <p>{{ck.cakePrice | currency:'EUR'}}</p>
        </div>
    </div>
  </div>
  <a routerLink="menu" class="viewmorebtn">Zobraziť viac<i class="bi bi-arrow-right"></i></a>
</div>

CSS：

    .banner
{
  background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
  height: 800px;
  background-position: center center;
  background-size: 100%;
}
.content
{
  top: 25%;
  left: 5%;
  position: absolute;
}
.content h1
{
  color: black;
  font-size: 50px;
  font-weight: bold;
}
.content a
{
  text-decoration: none;
  background-color: var(--primary-color);
  color:#fff;
  padding: 15px 40px;
  border-radius: 5px;
}

.content a:hover
{
  background-color:#64cff7;
  color: #fff;
}
.stepBox
{
  background-color: #64cff7;
  padding: 20px 20px;
  border-radius: 5px;
  text-align: center;
}
.stepBox h1
{
  font-size: 30px;
  font-weight: bold;
  color: black;
}
.stepBox p
{
  font-size: 20px;
  font-style: italic;
  color: #fff;
}
.highlight
{
  color: var(--primary-color);
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}
.cakebox
{
  padding: 10px 5px;
}
.cakebox img
{
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
}
.cakebox h1
{
  font-size: 18px;
  margin-top: 20px;
  font-weight: bold;
}
.viewmorebtn
{
  text-decoration: none;
  background-color: #64cff7;
  color: #fff;
  padding: 10px 10px;
  border-radius: 5px;
  font-size: 18px;
}
.viewmorebtn i
{
  padding-left: 5px;
}

@media screen and (max-width:600px)
{
  .banner
  {
    height: 600px;
  }
}

【问题讨论】：

• 欢迎。请修改您的帖子标题，以提出明确、具体的问题。不要添加标签。见How to Ask。也可以通过tour 了解该网站的运作方式。

标签： javascript html css angular navbar