CSS布局盒子模型之定位属性（position)

最新推荐文章于 2024-04-21 22:38:54 发布

前端-阿来

最新推荐文章于 2024-04-21 22:38:54 发布

阅读量2.5k

点赞数 1

文章标签：绝对定位 HTML相对定位 HTML5学习

本文链接：https://blog.csdn.net/weixin_43482353/article/details/89587424

版权

定位属性（position）

今天刚好学习了盒子模型的布局方式，觉得定位式相对于浮动式要不好理解，决定和大家分享一下，也好巩固一下知识。

目录
1.语法格式
2.静态定位
3.相对定位
4.绝对定位
5.固定定位

下面我就以上顺序总结介绍：

1.语法格式

<style type="text/css">
        .image {
            position: static /*relative absolute fixed*/;
        }
    </style>

2 .静态定位 (static)

当position设置值为static或者不设置时，元素按照HTML规则定位（因为静态定位是默认定位方式），定义top、bottom、left、right无意义。
（这里就不做示例了，默认按照HTML布局）
3.相对定位（relative）
即：设置盒子相对其原来位置的定位，相对定位后盒子占用其原页面空间。

默认HTML布局：
示例：

<style type="text/css">
        #st {
            width: 30%;
            height: 30%;
            border: solid;
        }
         #st img{
            width:50%;
            height:50%;
        }      
       /*.st-img {
            position:relative;
            left:50px;
            top:50px;
        }*/
    </style>
</head>
<body>
    <div id="st">
        <div class="st-img"><img src="/image/.1.jpg"/></div>
        <div><img src="/image/.2.jpg"/></div>
    </div>
</body>

运行结果：
默认HTML定位
设置相对定位：
示例：

     .st-img {
            position:relative;
            left:50px;
            top:50px;
        }

运行结果：
设置相对定位
可见图2位置并没有什么变化
下面来看
3.绝对定位（absolute）
绝对定位元素会浮于页面之上，不占用原来空间，后续元素会填充空缺的空间。
示例：

    .st-img {
            position:absolute;
            left:50px;
            top:50px;
        }

运行结果：

在这里插入图片描述
5.固定定位（fixed）
它是相对于浏览器的窗口定位，以浏览窗口为参照偏移定位。跟绝对定位一样，也会脱离文档流，简单点就是不占空间。

前端-阿来

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
CSS布局盒子模型之定位属性（position)

定位属性（position）今天刚好学习了盒子模型的布局方式，觉得定位式不好理解，决定和大家分享一下，也好巩固一下知识。目录1.语法格式2.静态定位3.相对定位4.绝对定位下面我就以上顺序总结介绍：1.语法格式<style type="text/css"> .image { position: static /*relative...
复制链接

扫一扫