Can I position an element fixed relative to parent? [duplicate]

by

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.

To position an element “fixed” relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv’s position.

To position an element “fixed” relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.

For example:

#yourDiv { position:fixed; bottom:40px; right:40px; }

This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.

More Related Contents:

  1. How to prevent a CSS keyframe animation from running on page load?
  2. Fill in text in HTML5
  3. How to disable margin-collapsing?
  4. Stretch and scale a CSS image in the background – with CSS only
  5. Does “display:none” prevent an image from loading?
  6. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  7. Semi-transparent color layer over background-image?
  8. Transparent hollow or cut out circle
  9. vertical align middle in
  10. How to make 3-corner-rounded triangle in CSS
  11. How can I scale an image in a CSS sprite
  12. Does CSS have a :blur selector (pseudo-class)?
  13. How to insert a line break before an element using CSS
  14. How to only show certain parts with CSS for Print?
  15. Which HTML5 reset CSS do you use and why? [closed]
  16. Customize Bootstrap 4’s grid-system Breakpoints
  17. CSS Justify text, fill space with dots [duplicate]
  18. Div height 100% and expands to fit content [duplicate]
  19. How to make an inline-block element fill the remainder of the line?
  20. CSS transition auto height not working [duplicate]
  21. First letter Capitalize and other letters in lower case in css?
  22. What does a `~` tilde in a CSS `url()` do?
  23. Full background image with fade effect
  24. TCPDF not render all CSS properties
  25. How to fix Internet explorer 7 bug when using percentage widths for layout?
  26. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  27. Media queries and background images
  28. Implement a CSS-only slideshow / carousel with next and previous buttons?
  29. Capitalize first letter of sentences CSS
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment