我的页面内容
我有一个使用FP卡的下拉菜单，如下所示：
我将卡片div的z-index属性设置为1000，位置绝对。此卡位于页面顶部的水平菜单中，位置固定。我的身体有一个相对位置，我的div与我页面的内容也有相对位置。
这是我的页面的渲染：
还有我的HTML代码：
<body>
<div id="body">
<div class="header">
<div class="row">
<div class="col-1 col-sm-1">
<button class="hamburger">☰</button>
</div>
<!--<div class="col-1 col-sm-1 col-lg-1 offset-lg-2" id="spanSearch">
<h4><span class="badge indigo hide">{# block badge_research %}{% endblock #}</span></h4>
</div>
<div class="col-2 offset-2 col-sm-2 offset-sm-3 col-md-2 offset-md-3 col-lg-2 offset-lg-3">
<div class="search d-inline pull-right">
<a href="#" onclick="showAndHide()" id='icon' ><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
</div>
!-->
<div class="col-7 col-sm-6 col-md-6 col-lg-6 offset-lg-5">
<ul class="list-inline pull-right downMenu inline">
<li class="nav-item dropdown btn-group">
<a class="nav-link" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false"> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} <img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="50" height="50"> {% else %} {{ 'acreat.mailing.nav.account'|trans }} {% endif %}</a>
<div class="dropdown-menu top dropdown" no-escape aria-labelledby="dropdownMenu1">
<div class="card">
<div class="card-block">
<div class="container-fuild">
<div class="row">
<div class="col-3">
<img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="200" height="112">
</div>
<div class="col-9">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<a href="{{ path('fos_user_profile_show') }}" class="dropdown-item">{{ 'acreat.mailing.nav.myaccount'|trans }}</a>
<a href="{{ path('fos_user_change_password') }}" class="dropdown-item">{{ 'acreat.mailing.nav.changepassword'|trans }}</a>
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
<a href="{{ path('front_index', {'account': '_exit'}) }}" class="dropdown-item">{{'acreat.mailing.admin.impersonalisation'|trans}}</a>
{% endif %}
</div>
</div>
<div class="card-footer text-center">
<a href="{{ path('fos_user_security_logout') }}" class="btn btn-block acreatRed dropdown-item">{{ 'acreat.mailing.nav.logout'|trans }}</a>
{% else %}
<a href="{{ path('fos_user_security_login') }}" class="btn btn-block acreatRed dropdown-item">{{ 'acreat.mailing.nav.login'|trans }}</a>
</div>
{% endif %}
</div>
</div>
</div>
</li>
</ul>
<div class="search d-inline inline pull-right">
<a href="#" onclick="showAndHide()" id='icon' ><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags inline" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
<div class="inline pull-right spanSearch">
<h5>{% block badge_research %}{% endblock %}</h5>
</div>
</div>
</div>
</div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{% block navbar %}
<div class="sidebar blue-grey darken-4 no-escape" id="navbar">
<div class="user-box no-escape">
<a class="logo no-escape" href="/" title="Retour à l'accueil">
<img src ="https://www.acreat.com/sites/acreat.com/themes/acreat/images/logo.png" class="img-fluid text-center no-escape"></img>
</a>
<h5 class="text-center">{{ 'acreat.mailing.title.website'|trans }}</h5>
</div>
<div class="list-group panel no-escape" aria-expanded="true">
<a href="/" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard margin-right"></i> <span>{{ 'acreat.mailing.nav.dashboard'|trans }}</span> </a>
<a href="#menu0" class="list-group-item no-escape arrowContainer" data-toggle="collapse" data-parent="#sidebar" aria-expanded="true"><i class="fa fa-tasks margin-right"></i><span>{{ 'acreat.mailing.nav.inbox'|trans }}<i class="fa fa-angle-down" id="wrapperArrow"></i></span></a>
<div class="collapse show no-escape" id="menu0">
<a href="/message/template/{{app.user.id}}" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.addmessage'|trans }}</span>
</a>
{%- set numberNotSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status !='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).andWhere("u.status !='SUBMITTED'").getQuery().getResult() -%}
<a href="/message/viewNotSent" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.messagenotsent'|trans }}
<span class="badge badge-primary badge-pill align-right">{{ numberNotSent[0][1] }}</span>
</span>
</a>
{%- set numberSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status ='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).getQuery().getResult() -%}
<a href="/message/viewSent" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.messagesent'|trans }}
<span class="badge badge-primary badge-pill align-right">{{ numberSent[0][1] }}</span>
</span>
</a>
<a href="/message/viewDraft" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.draft'|trans }}</span>
</a>
</div>
<a href="/mailinglist/view" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-list margin-right"></i> <span>{{ 'acreat.mailing.nav.mailinglist'|trans }}</span> </a>
<a href="/member/view" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="false" ><i class="fa fa-users margin-right"></i> <span>{{ 'acreat.mailing.nav.member'|trans }}</span></a>
{%- if is_granted('ROLE_ADMIN') -%}
<div id="adminBottom" class="no-escape">
<a href="#menu4" class="list-group-item no-escape bottom arrowContainer2" data-toggle="collapse" data-parent="#sidebar" aria-expanded="true"><i class="fa fa-envelope margin-right"></i> <span >{{ 'acreat.mailing.nav.administration'|trans }}<i class="fa fa-angle-down" id="wrapperArrow2"></i></span></a>
<div class="collapse show no-escape" id="menu4">
<a href="/admin/mailinglist" class="list-group-item no-escape" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationlist'|trans }}</a>
<a href="/admin/account/view" class="list-group-item no-escape" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationaccount'|trans }}</a>
<a href="/admin/message" class="list-group-item no-escape" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationnewsletter'|trans }}</a>
<a href="/admin/parameters" class="list-group-item no-escape" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationparameters'|trans }}</a>
</div>
</div>
{%- endif -%}
</div>
</div>
{% endblock navbar %}
{%- endif -%}
<div id="content">
{% block body %}
{%- if app.user == false -%}
<main class="col-12 col-md-12 col-xs-12 col-lg-12 col-xl-12">
{%- else -%}
<main class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
{%- endif -%}
{% block flashmessage %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('fail') %}
<div class="alert alert-danger" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% endblock flashmessage %}
{% block main %}
{%- block breadcrumb -%}{%- endblock -%}
<section></section>
{%- block confirmation -%}{%- endblock -%}
{% endblock main %}
{% block fos_user_content %}
{% endblock fos_user_content%}
</main>
{% endblock body %}
</div>
</div>
</body>
感谢您的帮助
1 个答案:
答案 0 :(得分：0)
您应该为固定父元素设置z-index，而不是为卡
设置z-index
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？