What is the reason position:sticky does not align elements to right:0?

I attempted to align my element with the right:0 property, but it doesn't seem to have any effect. The element remains stuck to the left edge of the browser window.

* {
  margin: 0;
  padding: 0;
  font-size: 50px;
}

.sticky {
  width: 50px;
  height: 50px;
  background: red;
  position: -webkit-sticky;
  position: sticky;
  right: 0px;
  top: 0px;
}

.text-block {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div>
  <div class="sticky">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deleniti facilis esse quae vitae ut corrupti maiores, magni obcaecati sit. Aut, rem nostrum officia beatae eligendi facilis provident at aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores error nihil in eaque, explicabo, sit autem vel incidunt fuga voluptatum inventore laudantium eligendi velit, sapiente repellat libero? Quas, eius in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, temporibus. Recusandae distinctio ea soluta consequatur provident aliquid magni nostrum, placeat dolores ducimus id atque enim illo! Cum sit iure cumque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo soluta hic saepe nobis, nulla asperiores autem maiores, fugit quas, eaque voluptatem excepturi error. Adipisci, illo corporis ipsum quis inventore repudiandae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, placeat facilis consectetur alias consequuntur beatae iste eum debitis aut asperiores ducimus? Voluptatem minus explicabo nulla molestias voluptates. Dignissimos, nesciunt quos? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam placeat, vel distinctio incidunt, officiis qui cumque quisquam atque maiores repellendus expedita modi cum vero sapiente odit ea fugit? Alias, fugit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi atque fugit inventore repellat perspiciatis libero sit qui ipsa? Illum nam pariatur ipsam magni vitae suscipit itaque doloremque soluta, esse minus! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis sunt blanditiis magnam, consectetur quod, numquam ducimus laboriosam nihil fugiat amet suscipit est quam tempore voluptatem iusto ut corporis optio? Illum.</p>
  </div>
</div>

Any ideas why this is happening? Are there alternative methods to horizontally position an element using position: sticky?

htmlcsscss-positionsticky

Answer №1

To achieve sticky behavior without using absolute or fixed positioning, you must align your element to the right side:

.box {
  display:inline-block; /* to contain the text element and create the space for the sticky element */
}

.sticky {
  width: 50px;
  height: 50px;
  background: red;
  position: sticky;
  margin-left:auto; /* put at the right side */
  right: 0px;
  top: 0px;
}

.text-block {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
  font-size: 50px;
}

* {
 margin:0;
}
<div class="box">
  <div class="sticky">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deleniti facilis esse quae vitae ut corrupti maiores, magni obcaecati sit. Aut, rem nostrum officia beatae eligendi facilis provident at aliquam... [truncated for brevity]
  </div>
</div>

Related questions:

Why doesn't bottom: 0 work with position:sticky?

What causes an element not to stick to the left when using position:sticky in CSS?

Answer №2

To resolve the issue, simply update the position to fixed.

* {
  margin: 0;
  padding: 0;
  font-size: 50px;
}

.sticky {
  width: 50px;
  height: 50px;
  background: red;
  position: -webkit-fixed;
  position: fixed;
  right: 0px;
  top: 0px;
}

.text-block {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div>
  <div class="sticky">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deleniti facilis esse quae vitae ut corrupti maiores, magni obcaecati sit. Aut, rem nostrum officia beatae eligendi facilis provident at aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores error nihil in eaque, explicabo, sit autem vel incidunt fuga voluptatum inventore laudantium eligendi velit, sapiente repellat libero? Quas, eius in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, temporibus. Recusandae distinctio ea soluta consequatur provident aliquid magni nostrum, placeat dolores ducimus id atque enim illo! Cum sit iure cumque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo soluta hic saepe nobis, nulla asperiores autem maiores, fugit quas, eaque voluptatem excepturi error. Adipisci, illo corporis ipsum quis inventore repudiandae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, placeat facilis consectetur alias consequuntur beatae iste eum debitis aut asperiores ducimus? Voluptatem minus explicabo nulla molestias voluptates. Dignissimos, nesciunt quos? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam placeat, vel distinctio incidunt, officiis qui cumque quisquam atque maiores repellendus expedita modi cum vero sapiente odit ea fugit? Alias, fugit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi atque fugit inventore repellat perspiciatis libero sit qui ipsa? Illum nam pariatur ipsam magni vitae suscipit itaque doloremque soluta, esse minus! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis sunt blanditiis magnam, consectetur quod, numquam ducimus laboriosam nihil fugiat amet suscipit est quam tempore voluptatem iusto ut corporis optio? Illum.</p>
  </div>
</div>

Answer №3

To make your sticky element work properly, include margin-left: auto in its CSS styling;

* {
  margin: 0;
  padding: 0;
  font-size: 50px;
}

.sticky {
  width: 50px;
  height: 50px;
  background: red;
  position: -webkit-sticky;
  position: sticky;
  right: 0px;
  top: 0px;
  
  /* Add this */
  margin-left: auto;
}

.text-block {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div>
  <div class="sticky">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deleniti facilis esse quae vitae ut corrupti maiores, magni obcaecati sit. Aut, rem nostrum officia beatae eligendi facilis provident at aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores error nihil in eaque, explicabo, sit autem vel incidunt fuga voluptatum inventore laudantium eligendi velit, sapiente repellat libero? Quas, eius in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, temporibus. Recusandae distinctio ea soluta consequatur provident aliquid magni nostrum, placeat dolores ducimus id atque enim illo! Cum sit iure cumque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo soluta hic saepe nobis, nulla asperiores autem maiores, fugit quas, eaque voluptatem excepturi error. Adipisci, illo corporis ipsum quis inventore repudiandae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, placeat facilis consectetur alias...
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding the integration of sass with webpack in an Angular 4 project

Is it possible to reference a sass file instead of a css file directly in the index.html? If so, how does webpack compile the sass into a css file? Additionally, what is the most effective way to bundle the sass file when building the application? The ve ...

cssangularwebpacksass

What is the best way to extract the src attribute from an image tag nested within innerHtml?

In the developer tools, navigate to console and enter: var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://tes ...

javascripthtmlinnerhtml

The CSS selector functions as expected when used in a web browser, however, it

While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. Fo ...

javascriptjquerycssseleniumcss-selectors

Struggling to Send Data and Generate a Calculated Value with Django

Hello, I am currently in the process of learning Django as a beginner. I have written some code that allows me to input data, but for some reason, I cannot successfully POST it to the database. I'm not quite sure where I've made an error. Model ...

pythonhtmldjangodjango-models

Efficiently loading Angular views with lazy loading techniques

I am currently working on a calculator website powered by Angular. This single-page site is fully responsive and divided into 7 sections, each featuring different calculators based on user preferences. To improve loading time, I am interested in implementi ...

htmlangularjs

Arrangement of words within a silhouette

I am looking to insert text into a specific shape. The parameters I have include the font, text width, text height, and margin of the text. The text is positioned within a shape with coordinates x and y. Here is an example image: https://i.sstatic.net/Mpq ...

htmlcss

Dividing the webpage background into separate sections to showcase a variety of colors, patterns, and more

I'm in the process of dividing the background on my website into distinct areas. My goal is to have the patterned area extend both horizontally and vertically on either side until it reaches the edge of the visible webpage. Figuring out how to achiev ...

htmlcss

What is the best method for serving static files within a nested EJS view directory?

Assuming I have the directory structure below: |--Views/ | --partial/ | --links.ejs | |--assets/ | --css/ | --styles.css | |--server.js Code for links.ejs <link rel="stylesheet" type="text/css" href="css/forms/switches.css"& ...

javascripthtmlcssnode.jsexpress

The error message "email() is not a valid function when using the onclick attribute

Can anyone lend a hand? I feel like I must be overlooking something really obvious. I'm having trouble calling my function to execute my ajax call. Any assistance would be greatly appreciated. Thank you! Here is an excerpt of the HTML code: $(docu ...

javascriptjqueryhtmlajax

Using preventDefault in the compositionend event does not make any difference

var inputNode = document.getElementById('view_1'); inputNode.addEventListener('compositionend', function(e) { console.log(e.cancelable); // true e.preventDefault(); }); <div id="view_1" class="view" contenteditable="true> &l ...

javascripthtmldom-eventscontenteditable

Ways to conceal rows within an implicit grid

In the code snippet below, CSS Grid is used to adjust the number of columns for wider containers. When dealing with narrower containers (such as uncommenting width: 80vw or resizing the example), implicit rows are added (with only two being specified in th ...

htmlcsscss-grid

What is the best way to insert a chart into a div using *ngIf in Angular?

I just started using chart.js and successfully created the desired chart. However, when attempting to implement two tab buttons - one for displaying tables and the other for showing the chart - using *ngIf command, I encountered an error: Chart.js:9369 F ...

javascripthtmltypescriptchart.js

Troubleshooting problem with aligning grid items at the center in React using

I've been facing a challenge in centering my elements group using the material ui grid system. Problem: There seems to be excess margin space on the extreme right. Code snippet: const renderProjects = projects.map(project => ( <Grid item ...

cssreactjsmaterial-uinext.js

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml

What is the process for triggering a function event on click (or any other function) within a browser's activation?

Some time ago, I was trying to figure out why the onclick event wasn't working when I clicked on a specific area of the browser. After consulting a guide, I discovered the issue and fixed it. It turns out that the problem was quite simple, and now I u ...

javascripthtmlfunctiondom-events

What is the reason for jQuery displaying undefined when attempting to retrieve a custom data attribute using .prop()?

In my dynamic HTML generated by JavaScript, the following code snippet is included: $(".task-status").live("click", function () { alert("data-id using prop: " + $(this).prop("data-id")) alert("data-id using data: " + $(this).data("id")) ...

javascripthtmljquerycustom-data-attribute

Is there a way to eliminate the default Tab indicator in Materializecss?

Utilizing the tab feature in MaterializeCSS to enhance the navigation tabs for my web application. By default, the initial tab is already chosen, evident by the underlined indicator beneath it as depicted in the image below. https://i.sstatic.net/PbGb5.pn ...

htmlcssmaterialize

What is the best way to create a view that caters to both administrators and regular users?

Currently, I am developing a system in Django which displays different fields and options based on whether the user is an administrator or a Jefe from the table. The administrator can access the panel in Django. class UsuarioCrear(SuccessMessageMixin, Crea ...

htmlpython-3.xdjangopostgresql

Struggling to navigate to a specific div element using a hash in an Angular application

I came across some information here and here stating that a page can be scrolled to a specific element using just a hash selector and an id attribute. However, I am facing difficulties implementing this in my Angular application. Could this be because of ...

javascripthtmlangularjsscroll

Setting a background-image using jQuery in Codeigniter can be done by following these steps

Currently, I am developing a project in Codeigniter. In my jQuery file, I have included code to set the background image of the body element: $('body').css('background-image','url(<?php echo base_url("assets/images/bg2.png");?& ...

phpjquerycsscodeigniter