定位（Position）

最新推荐文章于 2024-06-19 17:44:34 发布

尤翔宇

最新推荐文章于 2024-06-19 17:44:34 发布

阅读量814

点赞数

文章标签： css html

原文链接：https://blog.csdn.net/dream_AI/article/details/107143486

版权

定位（Position）
相关概念
定位组成
使用

一、相关概念
1.1、什么是定位？

定位：将一个元素定在某一个位置（坐标）。

1.2、为什么要使用定位？

定位可以让多个块级元素在一行显示
定位可以让一个元素在某一个盒子内固定在任意位置，且可以覆盖其它元素。

二、定位组成

定位由两个基本元素组成：定位模式（position）和边偏移（top、right、bottom、left），其中定位模式决定了元素在文档中的定位方式，而边偏移则决定了元素的最终位置（坐标）

2.1、定位模式（position）

static：静态定位（默认），即没有定位的意思，元素遵循标准流的摆放特性。且没有边偏移
relative：相对定位
absolute：绝对定位
fixed：固定定位

2.2、边偏移（top、right、bottom、left）

top：顶端偏移量，即元素距离其父元素上边线的距离
left：左侧偏移量，即元素距离其父元素左边线的距离
bottom：底部偏移量，即元素距离其父元素下边线的距离
right：右侧偏移量，即元素距离其父元素右边线的距离

<body>
    <hr/>
    <div id="div1">第一个盒子</div>
    <div id="div2">第二个盒子</div>
</body>

div1{
    width:200px;
    height: 100px;
    background-color: hotpink;
    position:relative;
/*相对定位*/
    left: 100px;
    top: 50px;
}
div2{
    width:200px;
    height: 100px;
    background-color: green;
}

3.2、绝对定位（absolute）

元素是相对于其父元素（有定位的父级元素）来移动位置的。（参照点是父元素）
如果元素没有父元素或父元素没有定位（position：static），则相对于浏览器来定位。
绝对定位不再占有原先标准流中的位置（脱标）

<body>
    <hr/><!--会影响红盒子的位置，不会影响绿盒子的位置-->
    <div id="outer1">
        <div>红盒子</div>
        绝对定位会脱离标准流<br/>
        不再占有原先标准流中的位置
    </div>
    <div id="outer2">绿盒子</div>
</body>

outer1{
    position:relative;/*相对定位*/
}
outer1>div{
/*红色盒子*/
    width:200px;
    height: 100px;
    background-color: hotpink;
    position:absolute;/*绝对定位*/
    left:50px;
    top:50px;
}
outer2{
/*绿色盒子*/
    width:200px;
    height: 100px;
    background-color: green;
    position:absolute;/*绝对定位*/
    left:100px;
    top:100px;
}

3.3、固定定位（fixed）

以浏览器的可视窗口作为参照点移动元素。不受父元素和滚动条的影响

固定定位是脱离标准流的，不再占有原先标准流中的位置。

<body>
     <div>TOP↑</div>
     <p>固定定位会脱离标准流</p>
</body>

body>div{
    width: 100px;
    height: 200px;
    background-color: hotpink;
    text-align: center;
    position:fixed;/*固定定位*/
    left: 100px;
    top:100px;
}