绝对定位元素如何相对于内容框偏移?
大家好,我们又见面了啊~本文《绝对定位元素如何相对于内容框偏移?》的内容中将会涉及到等等。如果你正在学习文章相关知识,欢迎关注我,以后会给大家带来更多文章相关文章,希望我们能一起进步!下面就开始本文的正式内容~

绝对定位元素偏移属性相对 content box 的设置
在使用绝对定位时,偏移属性(top、left、right)默认相对包含块的填充框(padding box)的外边缘。但是,有时我们需要相对内容框(content box)进行偏移设置,那么该怎么做呢?
根据问题描述,绝对定位元素需要位于填充框的右上角。如果偏移属性仅相对填充框外边缘,那么这样的设置:
.list {
padding: 1rem;
}
.tag {
position: absolute;
top: 0;
right: 0;
}
将导致元素位于填充框外侧的右上角。因此,需要使用相对内容框的偏移设置。
此时,top 和 right 应为:
top: -1rem; right: -1rem;
因为:
- top 偏离中心向下为正,从内容框右上角往上移动应为负值。
- right 偏离中心向右为正,从内容框右上角向左移动也应为负值。
通过设置负值,可以实现元素紧贴填充框的右上角停放。
好了,本文到此结束,带大家了解了《绝对定位元素如何相对于内容框偏移?》,希望本文对你有所帮助!关注米云公众号,给大家分享更多文章知识!
- Sqlalchemy 查询结果中如何访问指定字段?
