CSS之定位布局

幻阳梦天

已于 2022-10-27 15:55:35 修改

阅读量347

点赞数

分类专栏： CSS 文章标签： css 前端 vscode

于 2022-10-25 15:23:36 首次发布

本文链接：https://blog.csdn.net/qq_53977993/article/details/127512764

版权

什么是定位？

定位是一种高级的布局的方式。作用：你可以将任何元素放在页面任意的位置。

如何开启定位？

position：static;    默认值，没有开启定位
          relative   相对定位
          absolute   绝对定位
          fixed      固定定位
          sticky     粘滞定位

相对定位

position:relative;      偏移量(可正可负)
         left:0;    元素相对于定位位置左侧距离
         top:0;     元素相对于定位位置上侧距离
         right:0;   元素相对于定位位置右侧距离
         bottom:0;  元素相对于定位位置下侧距离

注意：通常偏移量只需要使用两个就可以对一个元素进行定位。(一般选择水平方向的一个偏移量和一个垂直方向的偏移量来为一个元素进行定位)

开启相对定位后，元素的特点有哪些？

1、开启相对定位，如果没有设置偏移量，元素的位置是不会发生变化的。

2、相对定位的原点是元素原本在文档流中位置。

3、开启相对定位后，元素的等级会提高。

4、开启相对定位，元素不会脱离文档流，即元素的性质不会改变。(也就是块元素还是块元素，行内元素还是行内元素)

绝对定位


position:absolute;      偏移量(可正可负)
         left:0;    元素相对于定位位置左侧距离
         top:0;     元素相对于定位位置上侧距离
         right:0;   元素相对于定位位置右侧距离
         bottom:0;  元素相对于定位位置下侧距离