admin管理员组文章数量:1610910
文章目录
- 1.position的定位类型
在解释这个问题之前，首先了解position的五个元素定位类型
1.position的定位类型
static：默认值，没有定位，遵循正常的文档流
fixed：固定定位，元素的位置是相对于浏览器窗口
relative：相对定位，相对于其正常的位置，移动元素，其原本所占空间不会改变
absolute：绝对定位，相对于自己最近==已定位==的父级元素，如果没有已定位的父级元素，则相对于html（一般子绝父相结合使用）
sticky：粘性定位，基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
absolute定位元素，top值为百分比，这个百分比是相对于最近的父（祖先）绝对定位或相对定位元素的高度的，即如果该父（祖先）元素高度为100px，top值为50%，则top的计算值为50px；如果找不到这个父元素，则是相对于html根元素；现在代码如下:
<body>
<main>
<h1>Am I centered yet?</h1>
<p>Center me . please!</p>
</main>
</body>
html,
body {
margin: 0;
padding: 0;
}
main {
background: #eee;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
/*transform: translate(-50%, -50%);*/
}
综上，如果position：absoluted绝对定位中设置的top值为百分比不生效的原因可能是其父级元素没有高度
版权声明：本文标题：【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728604007a1165221.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论