0

I'm new to HTML, and I'm trying to figure out how the position attribute with absolute value changes the element location.

As I understood, the absolute value locates the element related to the element's first ancestor. So I wrote this little piece of code, but the "bottom" attribute doesn't locate the button next to to "my-div", but to the HTML body (as I understand). Can someone explain to me why?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="my-div" style="width: 400px; height: 400px; background-color: blue; margin: auto;">
    <button style="position: absolute; bottom: 5px;">my button</button>
</div>
</body>
</html>

[Who's Gonna Carry the Boats and the Logs?]

Hodiya Eyal
  • 55
  • 8
  • first *positionned* ancestor not only the first ancestor (and in your case it's not the body but the viewport – Temani Afif Apr 05 '20 at 21:45
  • *If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way* https://www.w3.org/TR/CSS21/visudet.html#containing-block-details – Temani Afif Apr 05 '20 at 21:47

0 Answers0