Skip to content

Instantly share code, notes, and snippets.

@conwayeast

conwayeast/position: absolute

Created May 15, 2015 13:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save conwayeast/47e12fcb219eed4b848d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save conwayeast/47e12fcb219eed4b848d to your computer and use it in GitHub Desktop.
Download ZIP
Absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling.
Raw
position: absolute
/* Assuming this HTML structure:
<div class="relative">
<p>This element is relatively-positioned. If this element was <code>position: static;</code> its absolutely-positioned child would escape and would be positioned relative to the document body.</p>
<div class="absolute">
<p>This element is absolutely-positioned. It's positioned relative to its parent.</p>
</div> <!-- .absolute -->
</div> <!-- .relative -->
*/
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment