从腾讯一道面试题分析position:absolute

原题是这样的,让该图形水平垂直居中于页面,要求满足最多用户!(注:该图形是一个无限缩小的,就是四个角的正方形依次缩小,比如中间的是200px;第二个是100px;第三个是50px;依次下去。。。。)

实现的效果应该是这样的

腾讯面试题

朱宝祥的的实现方法是这样的,

<style type="text/css">

#wrap {width:200px; height:200px; position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; background:#f00;}

 

.topLeft{width:50%; height:50%; position:absolute; top:-50%; left:-50%; background:#f00;}

.topRight{width:50%; height:50%; position:absolute; top:-50%; left:100%; background:#f00;}

.bottomLeft {width:50%; height:50%; position:absolute; top:100%; left:-50%; background:#f00;}

.bottomRight {width:50%; height:50%; position:absolute; top:100%; left:100%; background:#f00;}

</style>

<body>

<div id="wrap">

<div class="topLeft"><div><div class="topLeft"><div><div class="topLeft"><div><div class="topLeft"><div class="topLeft"></div></div></div></div></div></div></div></div>

<div class="topRight"><div><div class="topRight"><div><div class="topRight"><div></div></div></div></div></div></div>

<div class="bottomLeft"><div><div class="bottomLeft"><div><div class="bottomLeft"><div></div></div></div></div></div></div>

<div class="bottomRight"><div><div class="bottomRight"><div class="bottomRight"><div class="bottomRight"><div class="bottomRight"></div></div></div></div></div></div>

</div>

</body>

红色的地方让我很纠结,因为我最初设置的是偏移都是50%,测试发现不对,后来仔细琢磨琢磨,确实不对,在这里要注意偏移的宽度和容器的宽度的问题。因为全部都是绝对定位,所以都是相对于wrap的左上角定位的,右上这部分必须要偏移出100%,才能脱离父容器。

但是如果这样写也是可以的。这是网上一人写的

.topLeft{top:-50%;left:-50%;}

.topRight{top:-50%;right:-50%;}

.buttomLeft{bottom:-50%; left:-50%;}

.buttomRight{bottom:-50%; right:-50%;}

这个就全部是50%偏移的,个中差异,仔细琢磨吧

原文链接:,转发请注明来源!

发表评论