HTML-CSS使用Position定位属性设置控件位置-无名笔记

HTML–CSS使用Position定位属性设置控件位置

Position属性语法

position: 属性值;

Position属性常用属性值

static：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

Position偏移位置

top：顶端偏移量
right：右侧偏移量
bottom ：底端偏移量
left ：左侧偏移量

Position相对定位

使用relative属性值添加相对定位

以元素原始位置为基准进行定位，不脱离HTML标准文档流
元素位置发生变化后，原来的位置会被保留下来，其他元素无法占用

相对定位代码示例

插入一个蓝色盒子和红色盒子：

<style>
    .box1{
        width: 100;
        height: 50px;
        background-color: blue;
    }
    .box2{
        width: 100;
        height: 50px;
        background-color: red;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

效果预览：

可以看到两个盒子贴在一起，上下边是对齐的

使用Position相对定位修改红色盒子（box2）的位置：

<style>
    .box1{
        width: 100;
        height: 50px;
        background-color: blue;
    }
    .box2{
        width: 100;
        height: 50px;
        background-color: red;

        position: relative;
        /* 设置定位方式为相对定位 */
        left: 50px;
        /* 设置左偏移50px距离（以左边为基准移动，而不是向左移动） */
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

效果预览：

可以看到，红色盒子（box2）在原位置基础上，向右移动了

也就是代码中“设置左偏移50px距离”

注意左偏移是以左边为基准偏移，而不是向左偏移！

如果需要向左移动只需要把left的属性值改为负数，依旧是以左边为基准移动，但是反方向移动

Position绝对定位

使用absolute属性值添加相对定位

以元素距离最近的父级元素为基准进行定位
如果直接父级元素没有定位属性，则向更上一级的父级元素找定位
如果所有父级元素都没有设置定位，则依据body根元素进行定位，即<body>标签
元素位置发生移动后，原来的位置不会被保留，可被其他元素占有
绝对定位会导致元素脱离标准文档流！

绝对定位代码示例

还以上面那两个盒子为例

<style>
    .box1{
        width: 100;
        height: 50px;
        background-color: blue;
    }
    .box2{
        width: 100;
        height: 50px;
        background-color: red;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

现在两个盒子都在初始位置：

添加absolute绝对定位：

<style>
    .box1{
        width: 100;
        height: 50px;
        background-color: blue;
    }
    .box2{
        width: 100;
        height: 50px;
        background-color: red;

        position: absolute;
        /* 设置定位方式为绝对定位 */
        left: 50px;
        /* 设置向左偏移50px距离 */
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

效果预览：

看上去好像和上面的相对定位差不多，但实际偏移的参照物是不同的

左右偏移距离相近所以看不出什么不同，下面添加上下偏移做对比

基于刚才的代码修改，设置上偏移10px

<style>
    .box1{
        width: 100;
        height: 50px;
        background-color: blue;
    }
    .box2{
        width: 100;
        height: 50px;
        background-color: red;

        position: absolute;
        /* 设置定位方式为绝对定位 */
        left: 50px;
        /* 设置向左偏移50px距离 */
        top: 10px;
        /* 设置上偏移10px */
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

效果预览：

可以看到是基于body也就是整个页面的最顶端进行上偏移10px（以上边为基准偏移10px）

如果box2的父级标签有定位属性则会以父级标签的定位为基准进行偏移，但含明显示例代码中box2没用父级标签，所以直接基于body进行定位偏移了

下面与相对定位做对比

将代码中的absolute绝对定位改为absolute相对定位

<style>
    .box1{
        width: 100;
        height: 50px;
        background-color: blue;
    }
    .box2{
        width: 100;
        height: 50px;
        background-color: red;

        position: relative;
        /* 设置定位方式为相对定位 */
        left: 50px;
        /* 设置向左偏移50px距离 */
        top: 10px;
        /* 设置上偏移10px */
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

效果预览：

可以看到box2（红色盒子）基于原来的位置进行上偏移10px（以上边为基准偏移10px），而不是基于父级元素body进行偏移

这就是绝对位置与相对位置的区别

Position固定定位

固定定位相比上面的相对定位和绝对定位要简单得多

使用fixed属性值添加固定定位

让元素脱离标准文档流，并依据浏览器窗口进行定位

简单来说就是固定在浏览器窗口，定位元素不会随着页面滚动而发生移动

例如很多网站的“返回顶部”按钮就是固定定位，无论怎么滑动页面都不会移动位置

还不理解请看右下角本站点的几个按钮（切换深浅色模式，返回顶部等），这些就是用的固定定位

代码示例

<style>
    .box1{
        width: 100;
        height: 50px;
        background-color: blue;
    }
    .box2{
        width: 100;
        height: 50px;
        background-color: red;

        position: fixed;
        /* 设置定位方式为固定定位 */
        left: 50px;
        /* 设置向左偏移50px距离 */
        top: 50px;
        /* 设置上偏移10px距离 */
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

这部分代码会把box2（红色盒子）固定在浏览器窗口左偏移50px距离，上偏移50px距离的位置

这里同理左偏移不是向左偏移而是以左边为基准进行偏移，需要反方向偏移只需要将属性值改为负数

这个放图片看不出来效果就不放效果图了，可以自己试一下

版权声明 1 本站名称： 无名笔记
2 本站网址：MyBlog.top
3 许可协议：本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权
4 文章版权归文章作者所有，转载请标注文章出处！
5 若文章作者注明版权声明，则当篇文章以文章作者声明为准！
6 若文章内容有侵犯您的合法权益，请及时联系站长处理：ceo@xxidc.top

THE END