IE 6 & IE 7 Z-Index Problem

本文详细解析了IE6/7浏览器中Z-index属性的工作原理及常见问题,阐述了不同元素间的堆叠顺序如何受其父级元素的影响,并提供了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Agree with validator comment - validating usually helps. But, if it doesn't heres a few pointers for z-index in IE:

1) elements who's z-index you're manipulating should be on the same level ie. you should be setting the z-index of #bottom and #body

if this is not feasible then

2) IE sometimes wont apply the z-index correctly unless the elements ou are applying it to have aposition:relative. Try applying that property to #bottom and #body (or #signpost)


Most of the answers here are wrong; some work, but not for the reason they state. Here is some explanation.

This is how z-index should work according to the spec:

  • you can give a z-index value to any element; if you don't, it defaults to auto
  • positioned elements (that is, elements with a position attribute different from the default static) with a z-index different from auto create a new stacking context. Stacking contexts are the "units" of overlapping; one stacking context is either completely above the another (that is, every element of the first is above any element of the second) or completely below it.
  • inside the same stacking context, the stack level of the elements is compared. Elements with an explicit z-index value have that value as a stack level, other elements inherit from their parents. The element with the higher stack level is displayed on top. When two elements have the same stack level, generally the one which is later in the DOM tree is painted on top. (More complicated rules apply if they have a different position attribute.)

In other words, when two elements have z-index set, in order to decide which will show on top, you need to check if they have any positioned parents which also have z-index set. If they don't, or the parents are common, the one with the higher z-index wins. If they do, you need to compare the parents, and the z-index of the children is irrelevant.

So the z-index decides how the element is placed compared to other children of its "stacking parent" (the closest ancestor with a z-index set and a position of relativeabsolute or fixed), but it doesn't matter when comparing to other elements; it is the stacking parent's z-index (or possibly the z-index of the stacking parent's stacking parent, et cetera) which counts. In a typical document where you use z-index only on a few elements like dropdown menus and popups, none of which contains the other, the stacking parent of all the elements which have a z-index is the whole document, and you can usually get away with thinking of the z-index as a global, document-level ordering.

The fundamental difference with IE6/7 is that positioned elements start new stacking contexts, whether they have z-index set or not. Since the elements which you would instinctively assign z-indexvalues to are typically absolutely positioned and have a relatively positioned parent or close ancestor, this will mean that your z-index-ed elements won't be compared at all, instead their positioned ancestors will - and since those have no z-index set, document order will prevail.

As a workaround, you need to find out which ancestors are actually compared, and assign some z-index to them to restore the order you want (which will usually be reverse document order). Usually this is done by javascript - for a dropdown menu, you can walk through the menu containers or parent menu items, and assign them a z-index of 1000, 999, 998 and so on. Another method: when a popup or dropdown menu becomes visible, find all its relatively positioned ancestors, and give them an on-top class which has a very high z-index; when it becomes invisible again, remove the classes.


<template> <a-card :class="$style.wrapHeight"> <!-- 普通搜索区域(替换原来的高级搜索) --> <a-card :class="$style.searchWrap"> <a-form-model ref="searchForm" class="ant-advanced-search-form" :model="factConfirmAdvSearchForm" :rules="rules" v-bind="formItemLayout" > <a-row> <a-col :span="8"> <a-form-model-item :label="'\u2002年度'" prop="timeRange" > <AuditRangePicker ref = "rangePicker" v-model="factConfirmAdvSearchForm.timeRange" :time-range.sync="factConfirmAdvSearchForm.timeRange" /> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="审计机构" prop="unitNames"> <AuditGroupPicker ref="unitNames" v-model="factConfirmAdvSearchForm.unitNames" :single="false" :read-only="false" :root-node="rootNode" /> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="项目名称" prop="projectName"> <a-input v-model="factConfirmAdvSearchForm.projectName" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="8"> <a-form-model-item :label="'\u2002\u2002被审计部门'" prop="auditedUnitNames"> <sd-group-picker v-model="factConfirmAdvSearchForm.auditedUnitNames" /> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="问题名称" prop="problemName"> <a-input v-model="factConfirmAdvSearchForm.problemName" /> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="业务类别" prop="problemType"> <a-input v-model="factConfirmAdvSearchForm.problemType" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="8"> <a-form-model-item :label="'\u2002\u2002\u2002\u2002风险等级'" prop="riskLevel"> <sd-select v-model="factConfirmAdvSearchForm.riskLevel" :options="riskLevelOption" :class="$style.select" allowClear /> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="新老问题" prop="isNewproblems"> <sd-select v-model="factConfirmAdvSearchForm.isNewproblems" :options="isNewproblemsOption" :class="$style.select" allowClear /> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="问题来源" prop="problemSource"> <sd-select v-model="factConfirmAdvSearchForm.problemSource" :options="problemSourceOption" :class="$style.select" allowClear /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="8"> <a-form-model-item label="问题确认状态" prop="feedbackStatus"> <sd-select v-model="factConfirmAdvSearchForm.feedbackStatus" :options="feedbackStatusOption" :class="$style.select" allowClear /> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="项目来源" prop="projectSourceType"> <a-radio-group v-model="factConfirmAdvSearchForm.projectSourceType"> <a-radio v-for="option in projectSourceOptions" :key="option.id" :value="option.id"> {{ option.text }} </a-radio> </a-radio-group> </a-form-model-item> </a-col> <a-col :span="8" :class="$style.searchbutton"> <div class="reportbuttonContent" style="margin-right: 15%"> <a-button @click="handleReset">重置</a-button> <a-button type="primary" @click="advSJBGSearch">查询</a-button> <a-button type="primary" @click="exportData">导出</a-button> </div> </a-col> </a-row> </a-form-model> </a-card> <!-- 数据表格区域 --> <a-card class="reporttablecardxm"> <sd-data-table ref="SJBGDataTable" :columns="columns" :filter-expressions="expressions" data-url="api/xcoa-mobile/v1/audit-fact-confirm/searchList" > </sd-data-table> </a-card> </a-card> </template> <script> import iamAuditWorkMixins from '@product/iam/audit/work/iam-audit-work-mixins' import axios from '@/common/services/axios-instance' import { getUserInfo } from '@/common/store-mixin' import auditAdvancedQuery from '../../components/audit-advanced-query.vue' import AuditGroupPicker from '../../components/picker/audit-group-picker.vue' import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins' import components from './_import-components/audit-statistics-confirm--list-import' import StatisticsService from './statistics-service' import AuditRangePicker from '@product/iam/components/picker/audit-range-picker.vue' import download from '@/common/services/download' import TableActionTypes from '@/common/services/table-action-types' import moment from 'moment' export default { name: 'AuditStatisticsConfirmList', metaInfo: { title: '事实确认查询', }, components: { AuditRangePicker, auditAdvancedQuery, AuditGroupPicker, ...components, }, mixins: [auditAdvancedQueryMixins, iamAuditWorkMixins], data() { return { rootNode: {}, currentYear: new Date().getFullYear(), projectId: this.$route.query.projectId, activeKey: '1', expressions: [], auditTypeOptions: [], formItemLayout: { labelCol: { span: 6 }, wrapperCol: { span: 14 }, }, rules: { timeRange: [{ required: true, message: '请选择统计时间', trigger: 'change' }], unitNames: [{ required: true, message: '请选择审计机构', trigger: 'change' }], }, factConfirmAdvSearchForm: { timeRange: [moment(), moment()], dateStart: '', dateEnd: '', auditedUnitIds: '', unitIds: '', auditedUnitNames: [], unitNames: [], problemName: '', projectName: '', problemType: '', riskLevel: '', isAccountability: '', isNewproblems: [], problemSource: [], feedbackStatus: [], projectSourceType: '', }, riskLevelOption: [], problemTypeOption: [], isAccountabilityOption: [], projectSourceOptions: [ { text: '内部审计项目', id: '1' }, { text: '外部审计项目', id: '2' } ], columns: [ { title: '序号', customRender: (text, record, index) => `${index + 1}`, width: '80px', }, { title: '项目名称', dataIndex: 'projectname', width: '200px', }, { title: '问题名称', dataIndex: 'problemname', scopedSlots: { customRender: 'islink' }, }, { title: '业务类型', dataIndex: 'problemtype', }, { title: '风险等级', dataIndex: 'risklevel', }, { title: '问题来源', dataIndex: 'problemsource', }, { title: '新老问题', dataIndex: 'isnewproblems', }, { title: '问题描述', dataIndex: 'problemdesc', }, { title: '被审计部门反馈意见', dataIndex: 'feedbackopinion', }, { title: '问题原因', dataIndex: 'problemreason', width: '200px', }, { title: '问题整改措施', dataIndex: 'measure', width: '200px', }, { title: '问题涉及部门', dataIndex: 'involveddepartmentnames', }, { title: '问题涉及联系人', dataIndex: 'involvedcontactsnames', }, { title: '问题确认状态', dataIndex: 'feedbackstatus', }, ], actions: [ { label: '导出', id: 'export', type: TableActionTypes.primary, permission: null, callback: () => { this.exportData() }, }, ], itemStatusOptions: [], auditModeOptions: [], changeTypeOptions: [], showOpinionModal: false, problemSourceOption: [], feedbackStatusOption: [ { id: '未确认', name: '未确认' }, { id: '已确认', name: '已确认' }, ], isNewproblemsOption: [], pending: [], batchSubmitSucceed: [], batchsubmitFailed: [], } }, created() { let userInfo = getUserInfo() const params = { orgId: userInfo.deptId, } axios({ url: 'api/xcoa-mobile/v1/iamorg/getCurrentUserGroup', method: 'get', }).then((res) => { userInfo = res.data params.orgId = res.data.id axios({ url: 'api/xcoa-mobile/v1/iamorg/findIamOrgId', method: 'post', params, }).then((res) => { this.id = res.data const deptCode = userInfo.id.toString() const deptName = userInfo.name this.rootNode = { code: deptCode, name: deptName, id: this.id } }) }) }, mounted() { StatisticsService.getDictionary('GY_PROBLEM_TYPE').then((res) => { this.riskLevelOption = res.data }) StatisticsService.getDictionary('GY_PROBLEM_SOURCE').then((res) => { this.problemSourceOption = res.data }) StatisticsService.getDictionary('GY_NEW_PROBLEM').then((res) => { this.isNewproblemsOption = res.data }) this.$nextTick(() => { if (this.$refs.rangePicker) { this.$refs.rangePicker.value = this.factConfirmAdvSearchForm.timeRange } }) }, methods: { getSelectIdValue(selectValue) { if (!selectValue) return null; if (Array.isArray(selectValue) && selectValue.length > 0 && selectValue[0].id) { return selectValue[0].id; } if (typeof selectValue === 'object' && selectValue.id) { return selectValue.id; } return null; }, // 重置 handleReset() { this.factConfirmAdvSearchForm = { timeRange: [], dateStart: '', dateEnd: '', auditedUnitIds: '', unitIds: '', auditedUnitNames: [], unitNames: [], problemName: '', projectName: '', problemType: '', riskLevel: '', isAccountability: '', isNewproblems: [], problemSource: [], feedbackStatus: [], projectSourceType: '', } this.$refs.searchForm.resetFields(); }, // 导出数据 exportData() { this.$refs.searchForm.validate((valid) => { if (valid) { this.advSJBGSearch() const url = `api/xcoa-mobile/v1/audit-fact-confirm/export` const fname = '事实确认列表.xls' download({ url, method: 'post', data: { expressions: this.expressions, maxResults: -1 } }, fname) } }) }, // 查看当前登录人是否项目成员 inProjectUser(userList) { return userList.some(item => item.userAccount === getUserInfo().account); }, // 刷新列表 refresh() { this.$refs.SJBGDataTable.refresh() }, // 查询方法 advSJBGSearch() { this.$refs.searchForm.validate((valid) => { if (valid) { this.expressions = [] // 修改时间范围处理逻辑 if (this.factConfirmAdvSearchForm.timeRange && Array.isArray(this.factConfirmAdvSearchForm.timeRange) && this.factConfirmAdvSearchForm.timeRange.length >= 2) { const [startDate, endDate] = this.factConfirmAdvSearchForm.timeRange if (startDate && endDate) { this.expressions.push({ dataType: 'str', name: 'dateStart', op: 'eq', stringValue: moment(startDate).year() + '', }) this.expressions.push({ dataType: 'str', name: 'dateEnd', op: 'eq', stringValue: moment(endDate).year() + '', }) } } // 审计机构 if (this.factConfirmAdvSearchForm.unitNames) { const codes = this.factConfirmAdvSearchForm.unitNames.map(item => item.code); this.expressions.push({ dataType: 'str', name: 'unitIds', op: 'eq', stringValue: `${codes.join(',')}`, }) } // 被审计单位 if (this.factConfirmAdvSearchForm.auditedUnitNames) { const codes = this.factConfirmAdvSearchForm.auditedUnitNames.map(item => item.code); this.expressions.push({ dataType: 'str', name: 'auditedUnitIds', op: 'eq', stringValue: `${codes.join(',')}`, }) } if (this.factConfirmAdvSearchForm.problemName) { this.expressions.push({ dataType: 'str', name: 'problemName', op: 'like', stringValue: `%${this.factConfirmAdvSearchForm.problemName}%`, }) } if (this.factConfirmAdvSearchForm.projectName) { this.expressions.push({ dataType: 'str', name: 'projectName', op: 'like', stringValue: `%${this.factConfirmAdvSearchForm.projectName}%`, }) } if (this.factConfirmAdvSearchForm.problemType) { this.expressions.push({ dataType: 'str', name: 'problemType', op: 'eq', stringValue: `${this.factConfirmAdvSearchForm.problemType}`, }) } const riskLevelId = this.getSelectIdValue(this.factConfirmAdvSearchForm.riskLevel); console.log('风险等级'+riskLevelId) if (riskLevelId) { this.expressions.push({ dataType: 'str', name: 'riskLevel', op: 'eq', stringValue: riskLevelId, }) } if (this.factConfirmAdvSearchForm.isAccountability) { this.expressions.push({ dataType: 'str', name: 'isAccountability', op: 'eq', stringValue: `${this.factConfirmAdvSearchForm.isAccountability}`, }) } const isNewproblemsId = this.getSelectIdValue(this.factConfirmAdvSearchForm.isNewproblems); console.log('是否新问题'+isNewproblemsId) if (isNewproblemsId) { this.expressions.push({ dataType: 'str', name: 'isNewproblems', op: 'eq', stringValue: isNewproblemsId, }) } const problemSourceId = this.getSelectIdValue(this.factConfirmAdvSearchForm.problemSource); console.log('问题来源'+problemSourceId) if (problemSourceId) { this.expressions.push({ dataType: 'str', name: 'problemSource', op: 'eq', stringValue: problemSourceId, }) } const feedbackStatusId = this.getSelectIdValue(this.factConfirmAdvSearchForm.feedbackStatus); console.log('问题反馈状态'+problemSourceId) if (feedbackStatusId) { this.expressions.push({ dataType: 'str', name: 'feedbackStatus', op: 'eq', stringValue: feedbackStatusId, }) } // 新增项目来源筛选 if (this.factConfirmAdvSearchForm.projectSourceType) { this.expressions.push({ dataType: 'str', name: 'projectSource', op: 'eq', stringValue: `${this.factConfirmAdvSearchForm.projectSourceType}`, }) } } }) }, }, } </script> <style module lang="scss"> @use '@/common/design' as *; /* 为下拉框添加清除按钮后的样式调整 */ .select { :global { .ant-select-selection--single { padding-right: 24px; /* 为清除按钮留出空间 */ } .ant-select-arrow { right: 11px; /* 调整箭头位置 */ } } } </style> 加一个表头冻结功能
07-13
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值