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

最新推荐文章于 2024-06-01 09:36:59 发布

简单Janeee

最新推荐文章于 2024-06-01 09:36:59 发布

阅读量2.5k

点赞数 3

分类专栏：偶遇的特殊属性等内容文章标签： css css3 前端

本文链接：https://blog.csdn.net/liqiannan8023/article/details/128109803

版权

偶遇的特殊属性等内容专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

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%);*/
}