title: Absolutely positioned element not rendering correctly in child template
body: <p>I have a form on my listing page (parent template) that consists of a text input field and a submit button. It happens to be styled with a CSS property of <code>position: absolute</code>. When I request the listing page of the app, the form is positioned correctly according to the offset properties (<code>top</code>, <code>right</code>) that have been defined in the style sheet. </p>
  
  <p>However, when I request a detail page (child template), the form doesn't render correctly. The text input field disappears and the submit button shifts over to the left edge of the form. That said, the offsets are still positioning the form correctly.</p>
  
  <p>I'm trying to understand what is causing the form to not render properly on the child template?</p>
  
  <pre><code># index.html &lt;--- Parent Template
  
  {% load static %}
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="{% static 'css/global.css' %}"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;form class="form_style"&gt;
            {% csrf_token %}
            {% for field in form %}
                {{ field }}
            {% endfor %}
            &lt;button class="form_button" type="submit"&gt;Search&lt;/button&gt;
        &lt;/form&gt;
        {% block content %}{% endblock %}
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/KpGlZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KpGlZ.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/9httu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9httu.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/YcBpT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YcBpT.png" alt="enter image description here"></a></p>
  
  <pre><code># detail.html &lt;--- Child Template
  {% extends 'index.html' %}
  
  {% block content %}
      {% for key, value in mineral.items %}
          {% if key == 'name' %}
              &lt;h1&gt;{{ mineral.name }}&lt;/h1&gt;
          {% elif key == 'image_filename'%}
              &lt;img src=""&gt;
          {% else %}
              &lt;p&gt;{{ value }}&lt;/p&gt;
          {% endif %}
      {% endfor %}
  {% endblock %}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/m0HaB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m0HaB.png" alt="enter image description here"></a></p>
  
  <pre><code># styles.css
  
  .form_style {
      display: flex;
      position: absolute;
      width: 25%;
      top: 10px;
      right: 10px;
  }
  
  .form_button {
      width: 20%;
      height: 38.2px;
  }
  </code></pre>