文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

新手求教：关于定位和z-index不起作用的问题，请各位大神帮忙，在线等_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:39:17
原创
977人浏览过

代码如下：
nbsp;html>

 


  
  
  
  
  
  下拉菜单
  <script></script>
  <script> <br /> $(document).ready(function(){ <br /> $("#slide").toggle(function(){ <br /> $("#down_box").show(); <br /> },function(){ <br /> $("#down_box").hide(); <br /> }) <br /> }) <br /> <br /> </script>
  
 
 

新手求教：关于定位和z-index不起作用的问题，请各位大神帮忙，在线等_html/css_WEB-ITnose

你好，管理员
新手求教：关于定位和z-index不起作用的问题，请各位大神帮忙，在线等_html/css_WEB-ITnose




 

  我想知道比如为什么后一个div不是应该相对于前一个div进行定位的吗，但是现在后一个div却相对于body进行定位，而且z-index也不管用，这是什么问题？


回复讨论(解决方案)

定位是跟父集相对的  你现在下面的那个div在外面  并不在上一个div里面   
so   就会出现这种情况咯
你这样写


    


你可以仔细去看看  相对定位和绝对定位的知识

后一个div你用的是position:relative，这种方式没有破坏文档流。
而它之前的div，用的是position:absolute，这种方式破坏了文档流，
它们两个div不在一个层面上的。

弱弱问一下。z-index不是叠层次序麽


    

  


随手写的，参考下吧，z-index在这种情况下才会起作用

后一个div你用的是position:relative，这种方式没有破坏文档流。
而它之前的div，用的是position:absolute，这种方式破坏了文档流，
它们两个div不在一个层面上的。 



absolute(绝对定位)和relative(相对定位)，通俗来讲前者定位的参照物为父级元素，后者的参照为本身在文档流中的位置
至于z-index的问题，你在网上找找z-index使用时的注意点，再结合你的代码，你就知道了
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：如果css足够强大了，你还会用编程的方式实现去实现css已有的功能吗？_html/css_WEB-ITnose 下一篇：css3绘制中国结_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML如何实现过渡效果？transition怎么配合HTML？ transition是CSS中用于实现元素样式渐变过渡的属性，通过指定属性、持续时间、时间函数和延迟来控制动画效果。基本用法是：在CSS中为元素定义transition属性，并结合状态变化（如hover）触发过渡，例如按钮悬停变色。HTML主要提供结构和类名，使CSS能够定位目标元素并应用过渡。常见问题包括属性不支持过渡、初始或目标值不明确、未正确触发变化等。使用技巧有：按需指定具体属性以提升性能，或添加delay参数实现延迟动画。
2025-06-12 14:45:01
457
html中段落首行空格怎么做 html首行缩进的4种实现方法 HTML中实现段落首行空格的方法有4种：1.使用CSS的text-indent属性，简单但不灵活；2.使用CSS的margin-left属性，适合调整整个段落；3.使用伪元素和content属性，灵活但需注意性能；4.使用标签和CSS的display:inline-block属性，精确但增加HTML复杂性。
2025-06-12 13:45:02
237
HTML图片链接怎么添加圆角效果 在HTML中为图片添加圆角效果，使用CSS的border-radius属性。1.在标签上应用内联样式，如。2.在样式表中定义类，如.rounded-image{border-radius:15px;}，然后在HTML中使用class="rounded-image"。
2025-06-12 13:27:01
988
html中字母h的含义 标题标签h系列的命名由来 HTML中的"H"代表"Heading"，即"标题"。1."H"的命名源于早期HTML的直观设计，便于理解。2.从到，它们定义了标题的层次结构，提升页面可读性和SEO。3.使用时，应唯一，遵循逻辑顺序，避免跳级。4.过度或滥用标题标签可能影响用户体验和SEO。
2025-06-12 13:09:01
746
HTML语义化标签有哪些？header和footer标签怎么用？ HTML语义化标签的作用是提升网页结构清晰度、可读性和SEO效果，并增强无障碍访问。常见标签包括、、、、、、等。一、常见的语义化标签有用于页面头部，用于导航区域，表示主要内容区（每页仅一个），代表独立内容块，为带标题的区块，用于侧边栏，作为页面或区块的底部。二、通常置于页面顶部或嵌套在或中作为局部头部，常包含标题、导航菜单、搜索框等功能。三、一般放在页面底部，用于展示版权信息、联系方式、社交链接等内容，也可嵌套在或内。四、使用时需注意：不能滥用标签如多个，语义化标签不依赖样式需配合CSS使用，考
2025-06-12 12:03:01
260
HTML如何创建水平线？hr标签有哪些属性？ 在HTML中创建水平线最简单的方式是使用标签，它默认渲染为灰色实线分隔内容。1.基本用法：直接插入即可在两段文字间添加水平线。2.hr标签曾有size、width、color、align、noshade等属性控制样式，但现在已被CSS取代。3.推荐做法是用内联样式或CSS类定义的border、height、background-color、width、margin等样式实现个性化。4.替代方案可用配合CSS模拟水平线，提升结构语义与样式控制灵活性。如今水平线设计多依赖CSS统一管理样式，而非裸用
2025-06-12 10:33:01
371
HTML背景色怎么设置？bgcolor属性还适用吗？ 设置HTML背景色最常用且推荐的方式是使用CSS。1.使用CSS设置背景颜色更标准，可通过样式表或内联样式定义，如或在标签中定义样式；2.bgcolor属性在HTML5中已不再支持，虽然部分浏览器仍可识别，但不符合现代网页开发规范；3.设置背景色时需注意颜色格式、对比度及避免滥用内联样式，推荐将样式集中管理以提升可维护性。
2025-06-12 10:30:02
919
html中class的作用 css类选择器的核心价值解析 在HTML中，class属性的作用是为元素打上标签，以便通过CSS或JavaScript操作和样式化。CSS类选择器被认为是网页设计中不可或缺的工具，因为它们提供了灵活性和复用性。1）class属性允许对元素进行分组和分类。2）CSS类选择器能以模块化方式管理样式，提高代码可维护性和设计调整效率。
2025-06-11 08:36:02
282
html中如何实现文字滚动？滚动效果制作教程 网页设计中实现文字滚动效果有三种常见方式。1.使用HTML的标签，通过direction、behavior等属性控制方向和速度，但该标签非HTML5标准；2.利用CSS动画实现横向滚动，通过overflow:hidden与@keyframes定义动画，控制文字无限循环移动；3.使用JavaScript动态控制元素位置，适合响应用户交互或动态内容加载。此外还补充了white-space、overflow等样式技巧，并建议根据需求选择方案：简单展示用，现代兼容性需求推荐CSS或JS方案。
2025-06-10 09:09:01
943
HTML表单提交到指定邮箱怎么实现 HTML表单可以通过服务器端脚本提交到指定邮箱。1.创建HTML表单，使用action属性指向服务器脚本。2.编写服务器脚本（如PHP）处理表单数据并发送邮件。3.注意安全性、邮件格式、错误处理和隐私合规。4.使用异步提交、表单验证和第三方邮件服务优化性能。
2025-06-09 08:06:02
923
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部