html - 关于position布局的疑问
本文介绍了html - 关于position布局的疑问的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<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>解决方案
经测试发现是perspective: 800px;和transform-style: preserve-3d;共同影响了positon。
这篇关于html - 关于position布局的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
