定位position

最新推荐文章于 2024-07-09 22:45:00 发布

单纯、

最新推荐文章于 2024-07-09 22:45:00 发布

阅读量779

点赞数 10

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_65174063/article/details/139829820

版权

定位最常运用的场景：

左右箭头压住图片
固定在窗口的广告

元素的定位属性

1.定位模式（定位的分类）

选择器{
    position:属性值;
}

position属性的常用值：

static 自动定位（默认定位方式）

relative 相对定位，相对于原文档流的位置进行定位

absolute 绝对定位，相对于上一个已经定位的父元素进行定位

fixed 固定定位，相对于浏览器窗口进行定位

sticky 粘性定位，基于用户的滚动位置来定位

2.边偏移

边偏移属性描述

top 顶端偏移量，定义元素相对于其父元素上边线的距离

bottom 底部偏移量，定义元素相对于其父元素下边线的距离

left 左侧偏移量，定义元素相对于其父元素左边线的距离

right·· 右侧偏移量，定义元素相对于其父元素右边线的距离

相对定位（自恋型）

相对于自己原来的位置进行定位，没有脱离标准流

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

position: relative;

注意：

相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

绝对定位（拼爹型）

父元素如果没有设置定位，那么相对于body（文档）进行定位
脱离标准流

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，不占位置。

position:absolute;

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

子绝父相

父元素设置相对定位，子元素设置绝对定位

.father{
    width:200px;
    height:100px;
    border:1px solder red;
    margin:50px auto;
    position:relative;
}
.son{
    width:10px;
    height:10px;
    background-color:blue;
    position:absolute;
    right:20px;
    bottom:20px;
}

如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。

因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位。

固定定位fixed(认死理型)

相对于浏览器进行定位

position: fixed;
right: 50px;
bottom: 100px;

定位的盒子居中

首先left 50% ，top 50% 父盒子的一半大小

然后外边距退回自己宽度及高度的一半值

.father{
    width:300;
    height:300px;
    border:1px solid green;
    position:relative;
}

.son{
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    left:50%;
    top:50%;
    /*倒回去自身的一半*/
    margin-left:-50px;
    margin-top:-50px;
}

静态定位 static

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

该定位状态下，无法通过边偏移属性来改变元素的位置。

叠放次序

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
            /* 子绝父相 */
            position: relative;
        }

        .father div {
            width: 200px;
            height: 200px;
            position: absolute;
        }

        /* z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
        注意点:z-index在position定位设置时才可以使用,不然无效
         position: absolute relative fiexed;
        */
        .son1 {
            background-color: blue;
            left: 0;
            top: 0;
            z-index: 3;
            /* 设置在最上层 */
            z-index: 9999;
        }

        .son2 {
            background-color: green;
            left: 30px;
            top: 30px;
            z-index: 2;
        }

        .son3 {
            background-color: pink;
            left: 60px;
            top: 60px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
        <div class="son3">son3</div>
    </div>
</body>

</html>

注意点：z-index在position定位设置时才可以使用，不然无效。

单纯、

关注

10
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
定位position

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
复制链接

扫一扫