CSS相对定位与绝对定位

在网页设计里,相对定位(Relative Positioning)和绝对定位(Absolute Positioning)是 CSS(层叠样式表)里控制元素位置的关键手段。下面为你详细讲解它们的概念、特点与应用场景。

相对定位

概念

相对定位是指元素相对于其正常位置进行定位。也就是说,元素首先会按照标准文档流进行布局,占据相应的空间,之后再依据 toprightbottomleft 属性对其位置进行微调。

特点
  • 保留文档流位置:元素进行相对定位时,会在文档流里保留其原本的位置,不会对其他元素的布局产生影响。
  • 偏移参考toprightbottomleft 属性的值是相对于元素的正常位置而言的。例如,设置 top: 10px 会使元素相对于其正常位置向下移动 10 像素。
  • 图片原本占据的空间依然保留。
应用场景
  • 微调元素位置:当需要对元素的位置进行小幅度调整时,相对定位是个不错的选择。
  • 创建元素的位移效果:可以结合 CSS 动画,使元素在相对位置上产生位移动画。

绝对定位

概念

绝对定位是指元素相对于最近的已定位祖先元素(即 position 属性值不为 static 的祖先元素)进行定位。如果没有已定位的祖先元素,则相对于文档的初始包含块(通常是 <html> 元素)进行定位。

特点

综上所述,相对定位适用于对元素位置进行微调,而绝对定位则适用于创建脱离文档流的布局和特殊的定位效果。在实际应用中,需要根据具体需求选择合适的定位方式。

  • 脱离文档流:元素进行绝对定位后,会脱离标准文档流,不再占据原本的空间,可能会覆盖其他元素。

  • 偏移参考toprightbottomleft 属性的值是相对于最近的已定位祖先元素的边界而言的。

    html 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            img{
                width: 400px;
            }
            /* 1.脱标不占位
            2.参照物:先找最近定位的祖先元素,如果所有祖先元素都没有定位,参照浏览器可视区
            3.显示模式特点改变:宽高生效(具备行内快的特点)
             */
            .news{
                position: relative;
                margin: 100px auto;
                width: 400px;
                height: 350px;
                background-color: #f8f8f8;
            }
            .news span{
                top: 0;
                right: 0;
                position: absolute;
                display: block;
                width: 92px;
                height: 32px;
                background-color: rgba(0, 0, 0, 0.6);
                text-align: center;
                line-height: 32px;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="news">
            <img src="./images/news.jpg" alt="">
            <span>展会活动</span>
            <h4>2222世界移动大会</h4>
        </div>
    </body>
    </html>
    应用场景
  • 创建弹出框和菜单:可以将弹出框或菜单元素绝对定位到触发元素附近。

  • 实现元素的重叠效果:通过绝对定位,使元素重叠显示,创建特殊的视觉效果。

相关推荐
我不吃饼干3 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇4 小时前
前端PerformanceObserver
前端
王者鳜錸4 小时前
PYTHON从入门到实践-18Django从零开始构建Web应用
前端·python·sqlite
拾光拾趣录4 小时前
ES6到HTTPS全链路连环拷问,99%人第3题就翻车?
前端·面试
haaaaaaarry5 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
xyphf_和派孔明5 小时前
关于echarts的性能优化考虑
前端·性能优化·echarts
PyHaVolask5 小时前
HTML 表单进阶:用户体验优化与实战应用
前端·javascript·html·用户体验
A了LONE5 小时前
cv弹窗,退款确认弹窗
java·服务器·前端
AntBlack6 小时前
闲谈 :AI 生成视频哪家强 ,掘友们有没有推荐的工具?
前端·后端·aigc
花菜会噎住7 小时前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js