Position absolute not working in page block

Question

I'm trying to position a logo inside a <section> block, and have set the logo to be positioned to the right and to the top of the <section> block. However, the logo is being positioned to the extreme right of the page and not the section block itself. Any help would be great.

body {
  background: rgb(204, 204, 204);
}

img {
  width: 150px;
}

.logo {
  right: 0px;
  top: 10px;
  position: absolute;
  display: block;
}

section {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

section[size="A4"] {
  width: 21cm;
  height: 29.7cm;
}

@media print {
  body,
  section {
    margin: 0;
    box-shadow: 0;
  }
}

<section size="A4">
  <div class="logo"><img src="https://vignette.wikia.nocookie.net/logopedia/images/e/eb/BBC.svg/revision/latest/scale-to-width-down/250?cb=20170913090831"></div>
</section>

score 0 · Answer 1 · answered Jul 30 '20 at 10:11

Just give the section element position: relative;

body {
  background: rgb(204, 204, 204);
}

img {
  width: 150px;
}

.logo {
  right: 0px;
  top: 10px;
  position: absolute;
  display: block;
}

section {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

section[size="A4"] {
  width: 21cm;
  height: 29.7cm;
  position: relative;
}

@media print {
  body,
  section {
    margin: 0;
    box-shadow: 0;
  }
}

<section size="A4">
  <div class="logo"><img src="https://vignette.wikia.nocookie.net/logopedia/images/e/eb/BBC.svg/revision/latest/scale-to-width-down/250?cb=20170913090831"></div>
</section>

Position absolute not working in page block

1 Answers1