How can I move an element to the top corner without using position: fixed?

Viewed 31

.main-section {
  padding-top: 79px;
  padding-left: 500px;
  width: 903px;
  font-family: 'Anton', sans-serif;
  display: block;
  object-fit: cover;
}

.background {
  position: fixed;
  left: 0px;
  top: 0px;
  display: inline-block;
}

.wholeArea {
  position: absolute;
  top: 0;
  right: 0;
}

.title {
  font-size: 60px;
  color: #132c54;
  padding-bottom: 10px;
}

.description {
  font-size: 25px;
  color: #2569c8;
  line-height: 29px;
  margin-bottom: 8px;
}

.inputText {
  font-size: 30px;
  color: #132c54;
  background-color: white;
}

.inputField {
  font-size: 30px;
  color: #132c54;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  outline-color: #132c54;
  border-radius: 6px;
}

.noDecoration {
  /* No Text Decoration */
  text-decoration: none;
  color: #132c54;
}

.selectInput {
  width: 413px;
  color: #132c54;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
}

.textInput {
  width: 400px;
  display: inline;
  color: #132c54;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
  padding-left: 3px;
}

.selectOption {
  font-size: 30px;
  color: #132c54;
}

.buttonStyle {
  font-size: 35px;
  color: #132c54;
  background-color: white;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
}

.buttonToggleStyle {
  font-size: 25px;
  color: #132c54;
  background-color: white;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
  margin-right: 20px;
}

.radioStyle {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
}

.leftColumnBox {
  position: absolute;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.leftColumnBox2 {
  position: absolute;
  margin-top: 321px;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.rightColumnBox {
  position: absolute;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.rightColumnBox2 {
  position: absolute;
  margin-top: 321px;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.leftColumn {
  width: auto;
  height: auto;
  margin-top: 81px;
  margin-left: 100px;
  margin-right: 100px;
  float: left;
  position: fixed;
  display: inline;
  top: 0px;
  left: 0px;
}

.rightColumn {
  width: auto;
  height: auto;
  margin-top: 81px;
  margin-left: 100px;
  margin-right: 400px;
  float: left;
  position: fixed;
  display: inline;
  top: 0px;
  right: 0px;
}

.advertImage {
  border: 10px white solid;
  border-radius: 6px;
  width: 300px;
  height: auto;
}

.resultsSection {
  display: none;
}

.radioArea {
  height: 45px;
  width: 700px;
  display: block;
}

.inputArea {
  height: 50px;
  width: 700px;
  display: block;
}

.labelText {
  width: 150px;
  display: inline-block;
}

.resultsText {
  line-height: 40px;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

.resultsHeaderText {
  line-height: 40px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  margin-bottom: 10px;
}

.hideInput {
  display: block;
}

.mainBorder {
  border: 20px solid white;
  border-radius: 12px;
  background-color: white;
}

.titleBorder {
  border: 20px solid white;
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: white;
}

.descBorder {
  border: 20px solid white;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: white;
}

.tabContent {
  display: none;
  margin-bottom: 8px;
}

.tabSwitch {
  margin-bottom: 8px;
}

I am trying to move a div into the top corner of a page to act as a background. When I use position: fixed;, the other elements of the page are shifted around but when I use position: relative, the are in the correct position. I want to make the div sticky when I scroll so it always stays in the same position in the background.

How can I do this?

.background {
position: fixed;
top: 0px;
right: 0px; }
<span id="background" class="background"></span>
1 Answers

Use following:

<!DOCTYPE html>
<html>
<head>
<style>

.background {
 position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  float:right;
  
  }
</style>
</head>
<body>

<span id="background" class="background">akshay</span>
<p>consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis  s interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed orn, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce </p>
</body>
</html>
Related