position fixed doesnt display css-CodePudding

for a school project i have to use position fixed and get the cookie statement right bottom on the screen. If I try to move the element doesnt even display.

.cookie {
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  width: 100px;
  height: 50px;
  opacity: 50%;
  float: right;
  background-color: #FA0;
}

.cookie-text {
  color: #FFF;
  text-align: center;
}

<section >
  <p >Cookie statement </p>
</section>

CodePudding user response：

When you set an element's top, bottom, left, and right positions, you're pinning to that exact spot. Since you're setting each position to 0% (which really should just be 0), you're taking up the entire screen.

If you want the element on the right bottom, just set the right and bottom values.

Also, you don't need the float since the element is fixed. If you want to ensure the cookie statement sits on top of other elements, add a z-index property with a high value.

Something like the following should work:

.cookie {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 50px;
  opacity: 50%;
  background-color: #FA0;
  z-index: 100; // or some other value > 0
}

CodePudding user response：

Remove the top and Left in your CSS.

.cookie {
  position: fixed;

  bottom: 0;

  right: 0;
  width: 100px;
  height: 50px;
  opacity: 50%;
  float: right;
  background-color: #FA0;
}

.cookie-text {
  color: #FFF;
  text-align: center;
}

<section >
  <p >Cookie statement </p>
</section>