Question 382021 in Html Question posted in
Some basic documentation can be found here.

Html – Position:fixed in CSS not changing anything

Adding position fixed to a div containing a gif element and a text element does not do anything, and any old threads about this did not help unfortunately.

body {
  font-family: Arial, sans-serif;
  border:0px;
  margin: 0;
  padding: 0;
  background-image: url (Images/wp3.jpg'); 
  filter: grayscale(30%);
  background-size: cover; 
  background-position: center;
  background-attachment: fixed; 
  background-color: rgba (255, 255, 255, 0.7);
}


.game {
width:100vw;
height: auto;
}

.text{
width:100vw;
height:750px;
display: flex;
justify-content: center;
align-items: center;
font-size:100px;
background-color: rgba (0, 0, 0, 0.7) ;
margin-left:-1500px;
}
.GIF{
position:    sticky;
height:750px;
overflow:    hidden;
display:    flex;
align-items: center;
justify-content: center;
position:    fixed !important;
}

The .text and .game elements are the text and gif inside the div element.

I tried changing between sticky and fixed, deleting position: relative inside the body element, adding !important tag to it, deleting the padding0 and margin0 from the body element.

Tags:

2

Answers


  1. 0

    You need to provide reproducible html code as well. You didn’t specify what you’re trying to do.

    You need to add one or more of top, right, bottom, and left properties to the element you want to make sticky / fixed. For instance, if you write position: sticky; and top: 0; in .GIF {}, it will stay stuck to the top of the page even when scrolling down.

    Use only one position property. Using two of them, and marking one as !important is adding redundancies to your code.

    Login or Signup to reply.
  2. 0
    1. you need to specify top 0 left 0 right 0
    2. Your element will break out of the context of the parent, so you need to see your html and understand who the parent is
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search