`
sty2008boy
  • 浏览: 301524 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

测试:z-Index 效果

 
阅读更多 

<html>
<head>
<title></title>
<script>
function plusDiv() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  if (div1.style.zIndex > div2.style.zIndex) {
    div1.style.zIndex = div1.style.zIndex - 2;
  } else {
    div2.style.zIndex = div2.style.zIndex - 2;
  }
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;z-index:1;width:100;height:100;background-color:#FF0000;left:0;top:0"></div>
<div id="div2" style="position:absolute;z-index:2;width:100;height:100;background-color:#00FF00;left:10;top:10"></div>
<input type="button" onclick="plusDiv()" value="交替底层出现" style="z-index:100;position:absolute;left:300" />
</body>
</html>
 
分享到：
| WCF大数据传输1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css设置z-index 失效的解决方法

    在CSS布局中，`z-index`属性用于控制元素在...通过调整`z-index`和`position`属性，可以有效地控制元素的叠加顺序，实现预期的视觉效果。在遇到`z-index`失效的问题时，检查这些基本设置通常能找出问题所在并进行修复。

    Z-Blog 两个我

    - 测试与优化：在实际环境中测试主题的显示效果，确保所有功能正常运行，并根据需要进行微调。 4. "两个我"主题特点： - 双风格：该主题可能包含两种不同的设计风格，用户可以根据心情或场合切换，增强用户体验。...

    css z-index 最大值

    如果真的需要使用高数值的z-index，那么在开发时需要对各种浏览器进行测试，确保其表现符合预期。对于那些需要高度精确控制的场景，例如在复杂的用户界面或者复杂的动画效果中，必须仔细测试并考虑浏览器之间的兼容...

    妙用z-index让一个div显示在最前面

    CSS（层叠样式表）是Web开发...通过合理设置`z-index`，可以有效地解决元素重叠的问题，提高用户界面的交互性和视觉效果。开发者需要遵循最佳实践，避免滥用和过高的`z-index`值，以确保Web页面的可扩展性和可维护性。

    深入理解css中position属性及z-index属性(推荐)

    例如，我们可以让一个菜单始终固定在页面的顶部，也可以通过改变z-index值来调整页面元素的覆盖顺序。这些布局技巧在制作响应式网页和优化用户交互体验方面非常重要。 举个例子，我们可以使用相对定位来稍微移动...

    解决uniapp开发抖音小程序video-player覆盖问题，超详细教程，前端相关操作，已成功上线产品

    验证效果：在真机或模拟器上预览并测试，看是否解决了覆盖问题。 4. 代码优化：将修复的代码整理成可复用的组件或样式，避免在后续开发中再次出现类似问题。 5. **ttcomponents**： 压缩包中的"ttcomponents...

    CSS教程:网页布局定位及z-index解释

    **CSS定位与Z-Index详解** ...实践和测试是掌握这些技巧的关键，因此建议动手编写代码并观察在不同浏览器中的效果。通过持续学习和实践，你将能灵活运用CSS定位和Z-Index，提升你的网页设计技能。

    多个iframe，其中一个的div能够处于最上层显示

    在网页设计中，`iframe` 是一种非常有用的元素，它允许我们在一个页面中嵌入另一个网页。当有多个 `iframe` 并存时，可能会出现重叠...在实践中，根据具体项目的需求和结构，可能需要进行微调和测试以达到最佳效果。

    CSS元素的层叠与z-index设置

    通过实际的测试，例如使用`01.html`这样的测试页面，可以在不同浏览器中观察这些规则的执行情况，从而更好地理解`z-index`和`stack level`的工作原理。 总的来说，熟练掌握CSS元素的层叠和`z-index`设置是创建交互...

    最全前端面试题-2.2（浏览器兼容问题篇-上百篇题集整理1个月）.doc

    - **IE6的`z-index`无效**：在某些情况下，IE6的`z-index`不起作用，可以通过设置父元素的`hasLayout`或使用`position:relative`解决。 - **3像素问题**：在IE6中，水平边距计算错误，可通过负边距修正。 - **...

    让div浮动在select之上的完美解决方案！多浏览器兼容

    在网页设计中，有时我们需要使一个`div`元素覆盖或浮动在`select`元素之上，以便实现特定的交互效果，如弹出层、提示信息或者自定义下拉菜单等。然而，由于浏览器之间的渲染差异，这往往成为一个挑战。本文将探讨...

    linear-gradient给图片加蒙层方法

    z-index: 1; /* 确保蒙层在图片之上 */ } ``` 在这个例子中，我们创建了一个伪元素`::before`，并设置它作为图片的蒙层。通过调整`opacity`属性，我们可以控制蒙层的透明度。 博客中的"博客-蒙层代码.html"文件...

    div+css浏览器兼容问题

    然而，在处理复杂布局时，负Z-index值可能会与其他元素产生意想不到的交互，特别是当页面中存在多个负Z-index元素时，它们之间的相对位置可能难以预测。 ### 总结 解决div+css的浏览器兼容性问题需要综合运用多种...

    前端项目-jquery-bgiframe.zip

    本项目“前端项目-jquery-bgiframe.zip”聚焦于一个特定的jQuery插件——bgiframe，它专为了解决在Internet Explorer浏览器（尤其是早期版本）中遇到的z-index问题而设计。 z-index是CSS中的一个属性，用于控制元素...

    JavaScript期末测试题.docx

    在上述的JavaScript期末测试题中，我们可以提炼出以下几个关键知识点： 1. **事件处理**： - `onClick`和`onChange`是HTML元素的事件属性，用来指定当元素被点击或其内容改变时执行的JavaScript函数。题目中正确...

    Jquery 解决IE6 Select 框总是在图层（div）的上面显示的BUG

    本文将深入探讨如何利用jQuery解决一个特定的问题：在IE6下，Select元素总是显示在具有较高z-index的图层（如div）之上。 首先，我们要理解z-index的概念。在CSS中，z-index是一个用于控制元素在垂直方向（即Z轴）...

    jQuery.easyui优化版本，解决了页面覆盖的问题

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架，它提供了一系列的 UI 组件，...同时，结合代码示例和测试案例，可以帮助开发者更好地理解和使用这个优化后的 jQuery EasyUI 版本，从而在项目开发中获得更好的效果。

    li 左右淡入淡出效果图片

    在网页设计中，"li 左右淡入淡出效果图片"是一种常见的视觉动画效果，..."li显示测试"可能是指对这种效果的测试，确保在不同设备和浏览器上都能正常工作。通过不断测试和调整，我们可以创建出既美观又实用的用户体验。

    IE6_IE7_IE8 CSS 兼容速查表

    5. `position`与`z-index`：IE6、7对`z-index`的处理不完全符合标准，可能导致元素重叠问题。确保所有定位元素都有明确的`z-index`值，并合理设置父元素的`position`属性。 6. `:hover`伪类：在IE6中，`:hover`只...

Magicbox
Global site tag (gtag.js) - Google Analytics