From f23c446ca1a0fbf6136998501999781ba1df24b6 Mon Sep 17 00:00:00 2001 From: Cynthia Date: Mon, 15 Apr 2019 14:04:43 -0400 Subject: [PATCH] added completed question to CSS folder --- ...xed-absolute-and-statically-positioned-element.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 03 - CSS/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element.md diff --git a/03 - CSS/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element.md b/03 - CSS/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element.md new file mode 100644 index 0000000..a5fc588 --- /dev/null +++ b/03 - CSS/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element.md @@ -0,0 +1,12 @@ +CSS ELEMENT POSITIONING TYPES + +There are four main options when positioning an element in CSS. These include the following: + +Static: This is the default in CSS and simply means that the element will flow onto the page as expected as it represents the normal behavior of the element. + +Relative: This means the element is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. + +Fixed: This keeps the element in exactly the same place even when the page is scrolled. Since a fixed position element is positioned relative to the browser window itself, it stays constant. + +Absolute: This allows you to place any page element exactly where you want it using the positioning attributes top, left, bottom. and right to set the location. These values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relative to the page itself. It is important to note that absolute positioning elements removes them from the flow of elements on the page,therefore limiting the flexibility of your layout if they are overused. +