CSS and the art of absolute positioning

Question

CSS and the art of absolute positioning

My grasp of CSS positioning was solid until I stumbled upon this straightforward code snippet (also available in JSFiddle).

#outer {
  /*position: absolute;*/
  box-shadow: inset 0 0 3px red;
}
#inner {
  box-shadow: inset 0 0 3px blue;
  /*position: absolute;
    left: 15px;*/
}

<p id="outer">outer
  <p id="inner">inner</p>
</p>

What bewilders me are the following:

If you remove the comment from the first position: absolute; rule, why does the outer paragraph not overlay the inner one? Since the outer paragraph lacks any non-static parent, it should be positioned with respect to the browser window, shouldn't it?
Uncommenting the first rule and then setting position: absolute; left: 15px; for the inner paragraph causes the element to shift downwards. Why does this happen?

html css css-position

Answer 1

Answer №1

The positioning of outer remains unchanged because the default margin of both inner and outer prevents it from moving upwards, which may not be what you were anticipating.

Similarly, in your second inquiry, the presence of margins and line-height in inner impacts its display. Experiment with adjusting these attributes to zero or different values to observe the outcome.

Additionally, I noticed a flaw in your HTML code. A  element should not enclose another  element.

Answer 2

The positioning of outer remains unchanged because the default margin of both inner and outer prevents it from moving upwards, which may not be what you were anticipating.

Similarly, in your second inquiry, the presence of margins and line-height in inner impacts its display. Experiment with adjusting these attributes to zero or different values to observe the outcome.

Additionally, I noticed a flaw in your HTML code. A  element should not enclose another  element.

Answer 3

Answer №2

Disclaimer: The markup used in this code snippet may not comply with W3C HTML Validator standards, which could lead to inconsistent results. A recommended refactor would involve wrapping the #inner tag in a  element and applying appropriate styling.

In response to Question 1: This behavior occurs because an element given a position: absolute: rule without a parent element containing a position: relative; rule will be positioned relative to the browser window and excluded from the document flow. Consequently, the #inner element will disregard the #outer element and assume its place in the document flow.

Regarding Question 2: The spacing issue is due to default margins applied to the  tag. Refer to the linked screenshot for visual contexthttps://i.sstatic.net/uRM51.png

Answer 4

Disclaimer: The markup used in this code snippet may not comply with W3C HTML Validator standards, which could lead to inconsistent results. A recommended refactor would involve wrapping the #inner tag in a  element and applying appropriate styling.

In response to Question 1: This behavior occurs because an element given a position: absolute: rule without a parent element containing a position: relative; rule will be positioned relative to the browser window and excluded from the document flow. Consequently, the #inner element will disregard the #outer element and assume its place in the document flow.

Regarding Question 2: The spacing issue is due to default margins applied to the  tag. Refer to the linked screenshot for visual contexthttps://i.sstatic.net/uRM51.png

Answer 5

Answer №3

It is important to note that block level elements are not allowed inside the p tag. http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

When the browser receives your original HTML, it detects the invalid structure and attempts to correct it.

The browser identifies the issue with nested p tags and automatically adds a closing p tag after the text "outer". This then necessitates the addition of an opening p tag for correctness.

The resulting HTML generated by the browser includes these corrections, which may differ from what you intended:

 outer

<p id="inner"> inner </p>

This discrepancy in the code structure can lead to unexpected results when rendered on the web page.

Answer 6

It is important to note that block level elements are not allowed inside the p tag. http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

When the browser receives your original HTML, it detects the invalid structure and attempts to correct it.

The browser identifies the issue with nested p tags and automatically adds a closing p tag after the text "outer". This then necessitates the addition of an opening p tag for correctness.

The resulting HTML generated by the browser includes these corrections, which may differ from what you intended:

 outer

<p id="inner"> inner </p>

This discrepancy in the code structure can lead to unexpected results when rendered on the web page.

Answer 7

Answer №4

Initially, it is important to note that a  element should not enclose another  element. Both #inner and #outer are considered as  elements, which inherently have a default display of block along with top and bottom margins.

Upon setting #outer to position: absolute, inspection will reveal that #outer is positioned relative to its initial ancestor element - the <body>.
In order to demonstrate this effect, consider altering your code as follows:
```
<div id="outer">outer 
 inner
</div>
```
Now, upon applying position: absolute and left: 15px to #inner, it becomes relative to its ancestor element - #outer.

If the intention is for #inner to overlap #outer, modify the display property of both elements to display: inline;, apply position: absolute solely on #inner, and eliminate the position value from #outer.

Keep in mind: position: absolute signifies that the element is positioned relative to its first positioned (non-static) ancestor element.

Refer to this demo for further clarity.

Answer 8

Initially, it is important to note that a  element should not enclose another  element. Both #inner and #outer are considered as  elements, which inherently have a default display of block along with top and bottom margins.

Upon setting #outer to position: absolute, inspection will reveal that #outer is positioned relative to its initial ancestor element - the <body>.
In order to demonstrate this effect, consider altering your code as follows:
```
<div id="outer">outer 
 inner
</div>
```
Now, upon applying position: absolute and left: 15px to #inner, it becomes relative to its ancestor element - #outer.

If the intention is for #inner to overlap #outer, modify the display property of both elements to display: inline;, apply position: absolute solely on #inner, and eliminate the position value from #outer.

Keep in mind: position: absolute signifies that the element is positioned relative to its first positioned (non-static) ancestor element.

Refer to this demo for further clarity.

CSS and the art of absolute positioning

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Conceal Outcomes, W3Schools PHP Example AJAX Interactive Search

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

The height of the li element is not properly aligning with the height of

Merging a generator of unpredictable quotes with a simulated typewriter effect

What is the best way to apply transparency to a color using its hex value in CSS?

Exploring the analysis of JavaScript and CSS coverage throughout various pages or websites

What is the process for implementing the sticky table header jQuery plugin?

Issues with organizing a Portfolio Gallery

problem with hiding bootstrap dropdown

How can I make either the left or right section remain sticky for a certain period of time?

Tips for showcasing information beneath a title on a webpage in Yii2 without duplicating the header

Struggling to implement a click event followed by DOM manipulation

Changing the color of asterisks for required fields in WooCommerceWould you like to modify

What is the best way to show a timestamp on a website and automatically end a session after a set period of time

Page rotates on hover effect with RotateY

Slider displays images generated by PHP in a horizontal motion

Is the radio functionality and dropdown menu experiencing technical difficulties?

How can I clear the value of "token-field" data in jQuery after successfully submitting a form?

Aligning the Twitter and Facebook buttons

How can I prevent users from clicking the same link multiple times in HTML?