Buttons stuck to the top using absolute

I went back to look at the absolute code I made and noticed the buttons stuck to the top.

How is that fixed?

https://jsitor.com/lnQaem9m5T

containerb {
  position: absolute;
  top: 0;
  left: 0;
  /* bottom: 0;*/
  right: 0;
  width: 100%;
  /*height: 100%;*/
  min-height: 100%;
  background-image: 
}

You told them to be stuck to the top. What do you think
top: 0
Does?

2 Likes

Just add display:flex to .containerb.

.containerb {
  position: absolute;
  display:flex;
  top: 0;
  left: 0;
etc.....

Changing relative to absolute on .wrapb fixed the issue.
https://jsitor.com/lnQaem9m5T

.wrapb {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 582px;
  height: 717px;
}

.playButton {
  position: absolute;
  width: 150px;
  height: 195px;

No I gave you the solution.

Your solution breaks here.

The buttons go out of the top of the screen and you can’t scroll up to see them.

Unlike my version where they are at the top when height is small and you can scroll down to see them all.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.