If you set both top and left:

body {
  width: 1000vw;
  height: 1000vh;
}

.test {
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 1.00);
  background-image: url("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
  border-radius: 50%;
  position: sticky;
}

<div class="test"></div>

I am currently doing a project in which I want certain columns of a table to sticky so they are always visible when you scroll horizontally, however a request has been made for the table headings to also be sticky when you scroll past them vertically.

I have managed to create the horizontal sticky effect on this table. I have managed to create the vertical sticky effect on all other table headers, however I can’t seem to get my table headings to sticky both horizontally and vertically. I did some searching but couldn’t find anything on it (probably because sticking something horizontally isn’t very commonplace).