【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效

在解释这个问题之前,首先了解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值为百分比不生效的原因可能是其父级元素没有高度

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值