The position of the absolute item is not determined in relation to its container

Question

The position of the absolute item is not determined in relation to its container

I am experiencing an issue with two items in a 'relative' container.

The problem arises when the 'absolute' item should be positioned relative to the container, but instead, it is being placed relative to the second 'static' item.

For example:

       <div style="position:relative">
           <button style="position:absolute;top: 200px">Button</button>
           <div style="margin-top: 500px">hi</div>
       </div>

The div containing 'hi' should be positioned below the button, however, the button is somehow appearing 200px below the 'hi' div.

It is important to note that adding a border to the container rectifies this issue.

Here is an example highlighting the difference with and without a border: JSfiddle

html css absolute

Answer 1

Answer №1

Everything is functioning as anticipated, as one element utilizes position:absolute while the other utilizes margin-top. The element using margin-top does not affect the positioning of its sibling because the sibling is positioned out of the normal flow with position:absolute.

Therefore, consider using position:absolute instead of margin-top, or apply margin-top to both child elements.

`position`

div {
  position: relative
}
div > * {
  position: absolute
}
button {
  top: 200px
}
span {
  top: 300px
}

<div>
  <button>Button</button>
  <span>hi</span>
</div>

`margin`

button {
  margin-top: 200px
}
span {
  margin-top: 300px;
  display: block
}

<div>
  <button>Button</button>
  <span>hi</span>
</div>

Answer 2

Everything is functioning as anticipated, as one element utilizes position:absolute while the other utilizes margin-top. The element using margin-top does not affect the positioning of its sibling because the sibling is positioned out of the normal flow with position:absolute.

Therefore, consider using position:absolute instead of margin-top, or apply margin-top to both child elements.

`position`

div {
  position: relative
}
div > * {
  position: absolute
}
button {
  top: 200px
}
span {
  top: 300px
}

<div>
  <button>Button</button>
  <span>hi</span>
</div>

`margin`

button {
  margin-top: 200px
}
span {
  margin-top: 300px;
  display: block
}

<div>
  <button>Button</button>
  <span>hi</span>
</div>

Answer 3

Answer №2

Have you considered removing the 200px from the

<button style="position:absolute; top: 200px>Botton</button>

?

Answer 4

Have you considered removing the 200px from the

<button style="position:absolute; top: 200px>Botton</button>

?

The position of the absolute item is not determined in relation to its container

Answer №1

`position`

`margin`

Answer №2

Similar questions

Transform the text upon hovering over the image, with the text positioned separate from the image

Error encountered: Unexpected character 'C' found at the beginning of the JSON data received during the Ajax callback

Gradually conceal the final column of an HTML table with the combination of CSS and JavaScript

What is the correct method to include basic authentication headers in a post request for retrieving HTML content?

What is the best way to retrieve the ID of the list item that has been clicked during a button event?

Tips for repairing buttons in the CSS container

Discovering the initial element with a data attribute above zero using JQuery

Retrieve data from an HTML table using PHP

Troubleshooting Firefox HTML Positioning Problem (Functioning Properly in IE and Chrome)

What methods are available for identifying non-operational pointer-events?

Issue encountered when submitting form: Error identified as "Unexpected string expression without template curly in string"

What is the Process for Streaming Long-Form Videos on YouTube to Mobile Devices?

The alignment of an image within a bootstrap table cell may not appear centered

retrieve the data-initial-value's value through JavaScript

how to combine a string in JavaScript using a prefix and suffix

Difficulty encountered while implementing a carousel using HTML, CSS, and JavaScript

Encountering a surprise syntax error while trying to reference JavaScript from HTML?

Arranging elements in a single line using Bootstrap 4

A beginner's guide to implementing the GET method with Express.js

Managing modules within the node_modules folder that have dependencies on .css files