关于position布局的疑问 财富值92

2017-08-20 16:27发布

站内问答 /
2137 2 3 
<style>     #wrap {         width:500px;         margin:0 auto;         perspective: 800px;         transform-style: preserve-3d;         position: relative;         /*在此处如果不写position:relative的话#wrap div应该是关于body进行定位，应该出现在最左边的距离顶部102px的位置上，但是实际情况还是居中位于顶部102px的位置上，说明下面div没有脱离父级呢？比较疑惑，请大神看下原因？*/     }          #wrap div {         position: absolute;         top: 102px;         left: 0;         width: 500px;     }          #wrap span {         height: 100px;         background: #ccc;         border: 1px solid #000;         display: block;     } </style> </head>  <body> <div id="wrap">     <div>         <span>1</span>         <div>             <span>2</span>             <div>                 <span>3</span>             </div>         </div>     </div> </div> </body> </html>
发送
2条回答
成彦奇 - 这个人很懒，什么都没留下
1楼 · 2017-08-20 17:18.采纳回答

经测试发现是perspective: 800px;和transform-style: preserve-3d;共同影响了positon。

yyelmo - 这个人很懒，什么都没留下
2楼-- · 2017-08-20 17:35

首先你想说即使去掉#wrap的relative属性，效果一样。你这个布局给#wrap加上这个属性和不加上有什么区别？
你的#wrap就相当于你的body了，不是说这个属性没起作用！
想看效果，在wrap上加个有高度的div，不久知道了？

一周热门 更多>