Css 绝对定位元素在子模板中未正确呈现_Css_Django Templates_Css Position

Css 绝对定位元素在子模板中未正确呈现

css

Css 绝对定位元素在子模板中未正确呈现,css,django-templates,css-position,Css,Django Templates,Css Position,我的列表页面（父模板）上有一个表单，由文本输入字段和提交按钮组成。它的样式恰好是CSS属性position:absolute。当我请求应用程序的列表页面时，表单将根据样式表中定义的偏移属性（top，right）正确定位但是，当我请求详细信息页面（子模板）时，表单无法正确呈现。文本输入字段消失，提交按钮移到表单的左边缘。也就是说，偏移仍然正确地定位表单我试图理解是什么导致表单无法在子模板上正确呈现 # index.html <--- Parent Template {% load st

我的列表页面（父模板）上有一个表单，由文本输入字段和提交按钮组成。它的样式恰好是CSS属性

position:absolute

。当我请求应用程序的列表页面时，表单将根据样式表中定义的偏移属性（

top

，

right

）正确定位

但是，当我请求详细信息页面（子模板）时，表单无法正确呈现。文本输入字段消失，提交按钮移到表单的左边缘。也就是说，偏移仍然正确地定位表单

我试图理解是什么导致表单无法在子模板上正确呈现

# index.html <--- Parent Template

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{% static 'css/global.css' %}">
  </head>
  <body>
      <form class="form_style">
          {% csrf_token %}
          {% for field in form %}
              {{ field }}
          {% endfor %}
          <button class="form_button" type="submit">Search</button>
      </form>
      {% block content %}{% endblock %}
  </body>
</html>

您是否可以从浏览器视图代码中发布生成的html css代码，以便我们查看并查看问题。如果您在视图中提到模板为index.html，则它将仅呈现给现在提供的devtools中的index.htmlHTML和css。

class=search\u框

在此不适用。到目前为止还没有编写任何代码。我仔细检查了传递给视图的模板。他们每个人都有要求的正确模板。你在主体上设置了宽度，以便表单知道它的宽度是什么的25%？我确实将主体的宽度设置为100%，但是我仍然得到了与输入框崩溃相同的结果。您是否可以从浏览器视图代码中发布结果html css代码，以便我们可以查看它并看到问题。如果您在视图中提到模板为index.html，它将仅呈现给index.htmlHTML和devtools提供的css。

class=search\u框

在此不适用。到目前为止还没有编写任何代码。我仔细检查了传递给视图的模板。它们都有所需的正确模板。是否在主体上设置了宽度，以便表单知道它的宽度是什么的25%？我确实将主体的宽度设置为100%，但在输入框折叠时仍然得到相同的结果。

# detail.html <--- Child Template
{% extends 'index.html' %}

{% block content %}
    {% for key, value in mineral.items %}
        {% if key == 'name' %}
            <h1>{{ mineral.name }}</h1>
        {% elif key == 'image_filename'%}
            <img src="">
        {% else %}
            <p>{{ value }}</p>
        {% endif %}
    {% endfor %}
{% endblock %}

# styles.css

.form_style {
    display: flex;
    position: absolute;
    width: 25%;
    top: 10px;
    right: 10px;
}

.form_button {
    width: 20%;
    height: 38.2px;
}