Fixed position but relative to container

0 votes

I am trying to fix a div so it always sticks to the top of the screen, using:

position: fixed;
top: 0px;
right: 0px;

However, a centred container contains the div. When I use position:fixed, the div is fixed with respect to the browser window, for example, up against the right side. It ought to be fixed relative to the container instead.

I'm aware that position:absolute may be used to position an element in relation to a div, but when you scroll down the page, the element disappears and doesn't stay at the top like it would with position:fixed.

Is there a trick or a way to get around this?

Jun 28, 2022 in CSS by Edureka
• 13,620 points
9,598 views

1 answer to this question.

0 votes

The issue with "fixed" positioning is that it removes the element from the flow. As a result, it cannot be repositioned relative to its parent because it does not have one. If, on the other hand, the container has a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}
answered Jun 28, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
1 answer

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple solution is to make the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
3,770 views
0 votes
0 answers

How to position text over an image with CSS

How can I use CSS to center ...READ MORE

Jul 11, 2022 in CSS by Edureka
• 13,620 points
462 views
0 votes
1 answer

Table with table-layout: fixed; and how to make one column wider

The table-layout CSS property specifies the algorithm ...READ MORE

answered Aug 8, 2022 in CSS by Tanishqa
• 1,170 points
1,995 views
0 votes
0 answers
0 votes
1 answer

How does the "position: sticky;" property work?

Do check if an ancestor element has ...READ MORE

answered Feb 16, 2022 in Others by Aditya
• 7,680 points
527 views
0 votes
1 answer

Difference between static and relative positioning

Static: The location of items is static ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
303 views
0 votes
1 answer
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
9,921 views
0 votes
1 answer

How can I position my div at the bottom of its container?

Bottom and position properties can be used ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
11,177 views
0 votes
1 answer

Position Relative vs Absolute?

position: relative moves an element relative to ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
455 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP