javascript当中relative或absolute用法
4.relative或absolute
马克-to-win：如何放置绝对正中的位置。项目心得：正常来讲，div绝对定位默认的是以body标签为参照，而且无论你的绝对定位的div外面有几层父div，但是当你把其中一个父div设置成position:relative;那么被绝对定位的div就会以这个div为参照。比如项目中index.html中的mysubtop1这个div就必须设成relative，它里面的div才会以它为参照系。
例 1.4.1
CenterAbsoluteIEFF.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Center</title>
<style>
div {width:500px; height:500px; background:#f11; position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-250px;font-size:16px }
</style>
</head>
<body>
<div>马克-to-win:margin-left：正数向右偏移,负数向左偏移。position:absolute; 左右上下居中方法且ie和火狐兼容的完美方法。1）这需要技巧：left:50%就把div的左上角放在正中间，margin-left: 100px, 就把div放在正中间右边100px，margin-left: -250px, 就把div放在正中间左边250px，
2）垂直方向也是完美兼容。3）但想要垂直和水平兼容， 必须把两个浏览器的窗口调成一模一样， 甚至左右上下的滚动条（注意ie比火狐多一个滚动条， 得把他刨除在外）。4）火狐有个查看/缩放/重置， 一定注意这个缩放要放成重置， 因为它也会影响两个浏览器看上去的兼容性。
</div>
</body>
</html>
例 1.4.2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<head>
<meta charset="UTF-8">
<title>z-index越大，越在前面</title>
<style type="text/css">
.wai{position:absolute;top:60px;left:60px;width:240px;height:240px;z-index:1;border: 1px solid #00ff00;}
.r, .a{width:60px;height:60px;text-align:center;color:#FFF;}
.r{position:relative;background-color:green;top:60px;left:60px;z-index:10;}
.a{position:absolute;background-color:red;top:0px;left:0px;z-index:14;}
</style>
</head>
<body>
<div class="wai">aaa马克-to-win
<div class="r">regre</div>
<div class="a">abred</div>
</div>
</body>
</html>
参考本章relativeAbsolute网上例子参考.html
更多内容请见原文，文章转载自：https://blog.csdn.net/qq_44594371/article/details/103064008
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义