容器1把容器2盖住了，请帮助！
<table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> <div id="div-datagrid" style="z-index: 0; width: 100%; position: absolute; height: 459px; left: 0px; top: 0px; background-color: Yellow;"> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> </div> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> 容器2 </td> </tr> </table> </td> </tr> </table>
回复讨论(解决方案)
这个跟容器无关，是因为你的div设置了position属性，那么div会脱离文档流
上面两个table的位置都没有变，只是div被显示的位置盖住了
<table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td>sadfas <div id="div-datagrid" style="z-index: 0; width: 100%; position: absolute; height: 459px; left: 110px; top: 110px; background-color: Yellow;"> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> </div> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> 容器2 </td> </tr> </table> </td> </tr> </table>
把上面的红色改一下，你就可以看出区别了
<table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td>sadfas <div id="div-datagrid" style="z-index: 0; width: 100%; position: absolute; height: 459px; left: 110px; top: 110px; background-color: Yellow;"> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> </div> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> 容器2 </td> </tr> </table> </td> </tr> </table>
在div的前面，加了结果字符，div中的top属性，和left属性更改一下。试试看吧
可以去专门看下css的position属性的知识，会有更好的了解的。
额。。。你把id="div-datagrid"的table设置成了绝对定位，绝对定位的元素就脱离了原本的文档流了，所以后面的table就认为它前面没有table，直接从左上角显示。所以absolute的table就覆盖了第二个table。
可以看看W3CSchool关于绝对定位的说明 http://www.w3school.com.cn/css/css_positioning_absolute.asp
这肯定是你自己练习写的东西吧，如果第一个table硬要absoluted;那么可以设置第一个table的style里z-index改成-1，后面被覆盖的table就显示出来了，不过talble1和talbe2是重叠的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head></head><body><table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> <div id="div-datagrid" style=" width: 100%; height: 459px; left: 0px; top: 0px; background-color: Yellow;"> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> <p> 容器1</p> </div> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td> 容器2 </td> </tr> </table> </td> </tr> </table></body></html>
把这两个样式去掉就行了z-index: 0;position: absolute;
我要实现列的冻结功能，不能去掉z-index: 0;position: absolute;
有没有更好的办法实现2个表不重叠？
<td style="position: relative;left: 0px; top: 0px;height:459px;">
他的父元素加上这段，不过，父元素需要设置宽和高，保证父元素占的大小，可以完全包裹被定位的元素。
ps：我怎么从代码中，没有看出要列冻结的样子呢？
了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AMWebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AMHTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。
HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AMhtmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract
HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AMHTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。
HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PMHTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AMHTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AMAnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐？Apr 05, 2025 pm 01:24 PM如何设计菜单中的虚线分割效果？在设计菜单时，菜名和价格的左右对齐通常不难实现，但中间的虚线或点如何...
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
Dreamweaver Mac版
视觉化网页开发工具
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
