二、position:relative和position:absolute配合实现元素在父容器右上角显示

最新推荐文章于 2025-05-26 21:54:46 发布

原创最新推荐文章于 2025-05-26 21:54:46 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

10 篇文章

订阅专栏

博客内容展示了一段代码，该代码演示了续读按钮在父容器的右上角显示这一效果，与信息技术相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="parent-container">
  <button class="bt-read">续读</button>
</div>

.parent-container{
    margin-left: 20rpx;
    /* 父容器必须是相对定位，子容器的绝对定位才能达到预想效果 */
    position: relative;
    width: 100%;
    padding-top: 38rpx;
}
.bt-read{
	/* 绝对定位只有配合父容器的相对定位，才能达到预想效果 */
    position: absolute;
    right: 76rpx;
    top: 47rpx;
}