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 in CSS by Edureka
• 9,760 points
81 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 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
1 answer
0 votes
0 answers

How to position text over an image with CSS

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

Jul 11 in CSS by Edureka
• 9,760 points
9 views
0 votes
0 answers

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

So I have a table with this ...READ MORE

4 days ago in CSS by Edureka
• 9,760 points
7 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 in Others by Aditya
• 7,300 points
20 views
0 votes
1 answer

Difference between static and relative positioning

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

answered Jun 10 in CSS by Edureka
• 9,540 points
22 views
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
4,697 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 in CSS by Edureka
• 9,540 points
27 views
0 votes
1 answer

Position Relative vs Absolute?

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

answered Jun 10 in CSS by Edureka
• 9,540 points
15 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP