Tue, 2015-11-17 21:15
Hi there:
I don't know why positioning (absolute and relative) have this effect on a div.
In the illustration below I show the two cases:
http://s29.postimg.org/ly56k57t3/Sin_t_tulo.png
The inner div shortens when its position is absolute, why?
Thanks in advance
Rafael
//mod edit: image link fixed ~gt
Tue, 2015-11-17 23:38
#1
Not an easy subject
The complexities of positioning are the reasons I advise beginners and even intermediate web developers to avoid using the position property without an overwhelming reason.
Let's start with static position. It's the default for all elements. It means the element is in the flow of the document, with containers following one after another. A plain, unstyled html document will illustrate this condition.
Relative position is a hybrid of sorts. It lies in the flow, while its content lies above the element and is out of the flow. If you offset the element, for example by applying top or left or other offset direction, you will see the content move. The original, default placement will be maintained.
Absolute position (AP) is much more complex. It is not in the flow. Other elements are not aware of it, including its parent. Its default placement is where it would live if it were static. Note that its margins do not collapse. The issue that you specifically asked about is shrink-wrapping. Unless you declare width and/or height, it will shrink-wrap its content. Different browsers tend to be more or less aggressive. Using AP elements for major elements of the page end up problematic and very difficult to make responsive to various screen sizes.
See the test case below.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content= "width=device-width; height=device-height; initial-scale=1"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ html, body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 0;} p { border: 1px solid red; font-size: 1em;} /* margin pushes hr below the static element far enough to get past the offset RP element */ hr { border: 3px outset; margin: 3em; auto 0;} div { border: 1px solid blue;} .test { position: relative;} .offset-test { position: relative; right: 25px; top: 70px;} .ap-test { position: absolute;} .offset-ap-test { position: absolute; left: 150px; top: 200px;} /*]]>*/ </style> </head> <body> <p> This is a static position element. </p> <p class="test"> This is a relative position element. </p> <p> Another static element. </p> <p class="offset-test"> An offset RP element. </p> <p> And another static element. Notice the RP el's preserved space above. </p> <hr> <div class="test"> <p> This is a static position element. </p> <p class="ap-test"> This is an AP element. </p> <p class="offset-ap-test"> This is an offset AP element. Notice that AP elements shrinkwrap their content. </p> <p> Another static element. </p> </div> </body> </html>
Feel free to ask about anything you find unclear. These are not easy concepts to convey.
cheers,
gary
Tue, 2015-11-17 23:52
#2
Thanks Gary for your complete
Thanks Gary for your complete answer.
I read it and almost got it all, but not quite.
I'll study it thoroughly latter, but I'm sure your answer doesn't need any further comments.
Rafael
Tue, 2016-01-05 10:01
#3
Absolute
Absolute positioning allows you to remove an object from the typical flow of the document and place it at a specific point on the page. To see how this works, let’s set up a simple unordered list of items that we’ll turn into clearly discernible rectangles.
Examcollection 350-080
As we’ve already learned, by default these items will have a static position applied. That means they follow the standard flow of the document and are positioned according to the margins that I’ve placed on the list. Now let’s see what happens if I target one of these list items and apply a value of absolute to the position property.