diff --git a/src/core/xfa/template.js b/src/core/xfa/template.js
index a9eebffc3..31f757c76 100644
--- a/src/core/xfa/template.js
+++ b/src/core/xfa/template.js
@@ -3183,7 +3183,14 @@ class PageArea extends XFAObject {
     }
 
     this[$childrenToHTML]({
-      filter: new Set(["area", "draw", "field", "subform", "contentArea"]),
+      filter: new Set(["area", "draw", "field", "subform"]),
+      include: true,
+    });
+
+    // contentarea must be the last container to be sure it is
+    // on top of the others.
+    this[$childrenToHTML]({
+      filter: new Set(["contentArea"]),
       include: true,
     });
 
diff --git a/test/unit/xfa_tohtml_spec.js b/test/unit/xfa_tohtml_spec.js
index 142c9615b..504d694cc 100644
--- a/test/unit/xfa_tohtml_spec.js
+++ b/test/unit/xfa_tohtml_spec.js
@@ -65,7 +65,7 @@ describe("XFAFactory", function () {
       });
 
       expect(page1.children.length).toEqual(2);
-      const container = page1.children[0];
+      const container = page1.children[1];
       expect(container.attributes.class).toEqual(["xfaContentarea"]);
       expect(container.attributes.style).toEqual({
         height: "789px",
@@ -75,7 +75,7 @@ describe("XFAFactory", function () {
         position: "absolute",
       });
 
-      const wrapper = page1.children[1];
+      const wrapper = page1.children[0];
       const draw = wrapper.children[0];
 
       expect(wrapper.attributes.class).toEqual(["xfaWrapper"]);
@@ -105,7 +105,7 @@ describe("XFAFactory", function () {
 
       // draw element must be on each page.
       expect(draw.attributes.style).toEqual(
-        pages.children[1].children[1].children[0].attributes.style
+        pages.children[1].children[0].children[0].attributes.style
       );
     });
   });