Scribd
Upload
63 views6 pages

Read PDF

DOM coordinates are relative to an element's offsetParent which is not necessarily the same as its parentNode. Elements are positioned automatically by default but can be pulled out of document flow using position:absolute. Positioning context is defined by offsetParent which is body by default but can be changed by position attributes like relative or absolute.

Uploaded by

obedburindi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
63 views6 pages

Read PDF

DOM coordinates are relative to an element's offsetParent which is not necessarily the same as its parentNode. Elements are positioned automatically by default but can be pulled out of document flow using position:absolute. Positioning context is defined by offsetParent which is body by default but can be changed by position attributes like relative or absolute.

Uploaded by

obedburindi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

● Read location with element.

offsetLeft,
element.offsetTop

● Coordinates are relative to


element.offsetParent, which is not necessarily
the same as element.parentNode

DOM Coordinates
<div class="div1"><div class="div2"><div class="div3">
X
Y
div1
offsetTop

div2
offsetLeft offsetTop offsetParent

offsetLeft div3

offsetHeight offsetParent

offsetWidth

Positioning elements
● Normally elements are positioned automatically by
the browser as part of the document

● To pull an element out of the document flow and


position it explicitly:
element.style.position = "absolute";
// anything but "static"
element.style.left = "40px";
element.style.top = "10px";
"absolute" - the element no longer occupies space in
the document flow.

● The origin inside an offsetParent (for positioning


descendants) is just inside the upper-left corner of
its border.

Positioning context
● Each element has an offsetParent (some
ancestor element).

● When an element is positioned, coordinates such


as element.style.left are relative to its
offsetParent.

● Default offsetParent is the <body> element.

● Some elements define a new positioning context:


○ position CSS attribute is absolute (element is explicitly
positioned)
○ position CSS attribute is relative (element is positioned
automatically by the browser in the usual way)
○ This element will become the offsetParent for all its
descendents (unless overridden by another positioning
context)
Positioning Children
Parent

Parent

top/offsetTop Parent

left/offsetLeft

Child margin
Child border

Element dimensions
● Reading dimensions: element.offsetWidth and
element.offsetHeight

Include contents, padding, border, but not margin

● Updating dimensions: element.style.width and


element.style.height
Positioning

<body>
<div id="div1">
<p>div1</p>
</div>

#div1 { width:
50px; height:
200px; background:
#ffe0e0;
}

Positioning
…
<div id="div2">
<p>div2</p>
<div id="div2-1">
<p>div2-1</p>
</div>
</div>
#div2 {width: 300px; height:
200px; position: relative;
background: #d0e0ff;}

#div2-1 {width: 150px;


height: 80px; position:
absolute; top: 50px; left:
100px; background: #d0e0ff;}

Positioning
...

<div id="div3">
<p>div3</p>
<div id="div3-
1">

<p>div3-1</p>
</div>
</div>
#div3 {width: 300px;
height:
200px; background:
#ffffe0;}

#div3-1 {width: 150px;


height:
80px; position: absolute;
top:
50px; left: 100px;
background:
#ffffe0;}

You might also like