html - 段落没有到位

问题描述

我希望段落在图像下方，而不是在图像上方。我还希望 bar 位于底部，并像导航栏一样粘在那里。

我已经将这些属性添加到栏：

职位：绝对
底部：0

在没有段落的页面上，它位于底部。

似乎这个问题应该很容易解决，但我不知道为什么会这样。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="description"
      content="Wandel door de kattekampen met verhalen"
    />
    <meta name="robots" content="index,follow" />
    <link rel="stylesheet" href="../../styles/style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <title>Boom 1945</title>
  </head>
  <body>
    <header class="main-head">
      <nav>
        <div class="home">
          <a href="../../index.html"><h1>Home</h1></a>
        </div>
        <ul class="links">
          <li><a href="../audio/">Audio</a></li>
          <li><a href="../tekst/">Tekst</a></li>
        </ul>
      </nav>
    </header>
    <section class="hero-fragment">
      <div class="hero-tekst">
        <h2>Boom 1945</h2>
        <h3>Reigerstraat / Pauwstraat</h3>
      </div>
    </section>
    <section class="plattegrond">
      <img
        src="../../Files/img/wijk-website/overige/7853c6b3-7ae8-4735-99b7-00ba028254b8.JPG"
        alt="plattegrond"
      />
    </section>
    <section class="fragment-tekst">
      <div class="tekst">
        <p>
          Op 2 juni 1945 werd de bevrijdingsboom op het pleintje
          Pauwstraat/Reigerstraat geplant. Deze boom is geplant door de heer
          Brits, oud-politieman en op dat moment de oudste bewoner van de
          Kattekampen. Bij de feestelijke bijeenkomst was een Canadese militaire
          band aanwezig met pipes en drums, gekleed in traditioneel Schots
          tenue. De indringende tonen van de doedelzakken pasten natuurlijk goed
          bij deze bijzondere gebeurtenis. Volgens zeggen zou toen in de grond
          onder de boom een koker mee begraven zijn met daarin een oorkonde..
        </p>
        <p>
          DAGBOEK FRAGMENT Zaterdag 2 juni 1945 <br />
          We hadden de Engelse, Amerikaanse en Russische vlag en natuurlijk ook
          de Nederlandse vlag aan het pleintje hangen. Mijnheer de Haas had
          prinses Juliana en prins Bernhard, en daar hebben we een oranje roes
          omheen gedaan, en die stonden bij Buiten op het platje. Gistermiddag
          werd de koningin er ook tussen gezet. Om 2 uur is het begonnen. Er zou
          in het pleintje een herdenkingsboom geplant worden, door de oudste
          buurtbewoners, n.l. mijnheer Brits en mijnheer van Putten. Die twee
          zouden hem gistermiddag bij de opening planten, maar de voorzitter en
          Hendrik hebben het gistermorgen al gedaan, omdat het de tijd van het
          jaar niet was om een Amerikaanse eik te planten en dan ’s middags
          helemaal niet. De planting van de boom zou geschieden met een
          oorkonde. Die oorkonde was zo mooi, gewoon zonde dat die de grond in
          moest. De voorzitter sprak het openingswoord, en toen mocht mijnheer
          Brits de oorkonde in de grond stoppen, en mijnheer van Putten mocht
          het gat dichtgooien. Toen het klaar was, werd er een rondedans om de
          vrijheidsboom gedaan. Daarna begonnen de spelen.
        </p>
      </div>
    </section>
    <section class="fragment-bar">
      <div class="bar">
        <a href="../tekst/introductie.html"
          ><img src="../../Files/icons/back-button.svg" alt="back"
        /></a>
        <a href="../tekst/boom-2019.html"
          ><img src="../../Files/icons/forward-button.svg" alt="forward"
        /></a>
      </div>
    </section>
  </body>
</html>

.main-head {
  background: #262628;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 10vh;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 90%;
  margin: auto;
}

.home {
  -webkit-box-flex: 2;
      -ms-flex: 2 1 40rem;
          flex: 2 1 40rem;
}

.links {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.links a {
  color: #ebd728;
}

.hero-fragment {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(transparent)), url("../Files/img/wijk-foto 1.png");
  background: linear-gradient(rgba(0, 0, 0, 0.4), transparent), url("../Files/img/wijk-foto 1.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 25vh;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.hero-tekst h3 {
  font-weight: 400;
}

.plattegrond {
  height: 20vh;
  margin: auto;
  text-align: center;
  padding: 2rem 0rem;
}

.plattegrond img {
  width: 40vh;
  text-align: center;
}


.fragment-tekst {
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.fragment-tekst p {
  margin: 2rem 0rem;
  width: 80%;
}

.tekst {
  width: 80%;
}

.fragment-bar {
  background: #262628;
  height: 10vh;
  position: absolute;
  bottom: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 90%;
  margin: auto;
}






Thanks in advance

标签： htmlcss

html - 段落没有到位

问题描述

解决方案

推荐阅读