领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

javascript当中relative或absolute用法

nixiaole 2024-11-12 13:43:20 知识剖析 26 ℃

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>

篇幅有限更多请见扩展链接：http://www.mark-to-win.com/tutorial/js_3_relativeAbsolute.html「链接」

Tags：

猜你喜欢

最近发表
标签列表