3 replies [Last post]
rafael.soteldo
rafael.soteldo's picture
Offline
newbie
Last seen: 3 years 10 weeks ago
Timezone: GMT-4.5
Joined: 2015-10-24
Posts: 8
Points: 27

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9738
Points: 3817

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rafael.soteldo
rafael.soteldo's picture
Offline
newbie
Last seen: 3 years 10 weeks ago
Timezone: GMT-4.5
Joined: 2015-10-24
Posts: 8
Points: 27

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

Augustus98
Augustus98's picture
Offline
newbie
Last seen: 3 years 20 weeks ago
Timezone: GMT+5
Joined: 2016-01-05
Posts: 1
Points: 1

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.