position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；

最新推荐文章于 2023-10-21 09:42:12 发布

忘喧

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量1.3k

点赞数

分类专栏： HTML/CSS 文章标签： html 定位 css

本文链接：https://blog.csdn.net/XiaoYige_97/article/details/107699005

版权

HTML/CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

position 属性：

position常见的定位模式：

定位模式	描述	是否脱离文档流	移动模式	定位偏移属性
static	默认属性	对象遵循常规流	不移动	不移动
relative	相对定位	对象脱离常规流/但保留位置	相对以自身移动	top right bottom left
absolute	绝对定位	对象脱离常规流	相对以有定位的父级元素移动	top right bottom left
fixed	固定定位	对象脱离常规流	偏移定位是以窗口为参考	top right bottom left

定位模式装换：跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，display依然是block ,但是可以和其他的行内元素同一行显示，也可以和同样添加了浮动的元素及添加浮动的元素同一行显示。
添加了定位和浮动的元素，会进行隐式的转换为display:inline-block,那么行内元素可以设置宽高，块级元素可以同一行显示。
添加了定位的元素，z-index默认为0，可以设置z-index 的值来显示元素的层级关系，z-index 越大，越在上层，离眼睛越近，z-index 可以为正数，也可以是负数。

relative：相对定位

相对定位 <===> position: relative;
移动方式

是相对于自己的左上角开始移动

代码：

<style>
    div {
        width:200px;
        height:200px;
    }
    .top{
        position: relative;    /*给上面的div 添加相对定位  */
        top:100px;     /*向下移动100px(相对于自己的左上角移动)*/
        left: 100px;    /*向右移动100px(相对于自己的左上角移动)*/
        background-color:rosybrown;
    }
    .bottom{
        background-color:sienna;
    }
</style>

<body>
    <div class="top">上</div>
    <div class="bottom">下</div>
</body>

效果：下面的div并没有向上移动，说明添加了相对定位的元素，它在文档流中的位置仍然保留，是以自己的原来的左上角为基点移动.

absolute: 绝对定位和居中问题

绝对定位 <===> position: absolute;

注意：加了绝对定位的盒子，margin：auto 无效，可以使用一下方法可以实现水平居中和垂直居中

.div{
    position: absolute;  /*子级元素添加了绝对定位*/
    top: 50%; /*相对于父级元素向下移动50%*/
    left: 50%;  /*相对于父级元素向右移动50%*/
    width: 200px;
    height: 200px;
    /*向上移动100px(heitht/2) 先左移动100px(width/2) */
    margin: -100px  0 0 -100px; 
    background: #aaa;
}

移动方式：

父级和祖级元素没有定位，或者没有父级元素，则以浏览器当前屏幕为准对齐(document文档)。就是以body 的左上角为基点移动。

代码

<style>
    .top {
        position: absolute;// 绝对定位
        top: 100px;     // 向下移动100px
        left: 100px;   //向右移动100px
        width: 200px;
        height: 200px;
        background: rgb(214, 139, 139);
    }
    .bottom {
        width: 200px;
        height: 200px;
        background: #aaa;
    }
</style>

<body>
     <div class="top">top</div>
     <div class="bottom">bottom</div>
</body>

效果：可以看出，添加了绝对定位的元素，完全脱标，完全不占位置。被下面的div 占据了以前的位置。
父级有定位

代码：

.father {
    position:relative; /*父级元素添加了定位*/
    width: 300px;
    height: 300px;
    background: rgb(214, 139, 139);
}
.son {
    position: absolute;  /*子级元素添加了绝对定位*/
    top:50px;  /*相对于父级元素向下移动50px*/
    left:50px; /*相对于父级元素向右移动50px*/
    width: 200px;
    height: 200px;
    background: #aaa;
}

</head>

<div class="father">
   小头爸爸
   <div class="son"> 大头儿子</div>
</div>

效果：如果父级元素添加了定位，那么绝对定位的元素就以离自己最近的有定位的父级元素为基点移动

在这里插入图片描述

fixed：固定定位

固定定位 <===> position: fiexd
移动模式

偏移定位是以窗口为参考

随窗口的滚动，一直决定在一个位置

<style>
    body{
        height: 4000px;
        /* background-color: #f00; */
    }
    div{
        position: fixed;
        top: 20px;
        right:10px;;
        width: 100px;
        height:50px;
        background-color: rgb(167, 36, 36);
    }
</style>
<body>
 <p>aaa</p><br><br><br><br><br><br><br><br><br><br><br><p>bbb</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>ccc</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div>回到页首</div>
</body>

Z-index

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候， z-index较大的元素会覆盖较小的元素在上层进行显示。
简单的说，就是一个三维空间，X-Y表示的是盒子（一个二维的图形）,Z表示在空间上的位置，该属性设置一个定位元素（Z-index 仅能在定位元素上奏效（例如 position:absolute;））沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

在这里插入图片描述

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。如果取值相同，则根据书写顺序，后来居上。

代码：

<style>
    div {
        position: absolute;
        width: 100px;
        height: 100px;
    }

    .one {
        top: 20px;
        background-color: lightskyblue;
    }

    .two {
        top: 40px;
        left: 20px;
        background-color:magenta
    }
    .three {
        top: 60px;
        left: 40px;
        background-color:rgb(113, 113, 170);
    }

    .four {
        top: 80px;
        left: 80px;
        background-color: orange;
    }
</style>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
</body>

效果：Z-index默认都是0，值相同，则根据书写顺序，后来居上，所以1在最下面，4在最上面。

在这里插入图片描述

设置z-index的值

代码：

<style>
    div {
        position: absolute;
        width: 100px;
        height: 100px;
    }

    .one {
        top: 20px;
        z-index:4;
        background-color: lightskyblue;
    }

    .two {
        top: 40px;
        left: 95px;
        z-index:3;
        background-color:magenta
    }
    .three {
        top: 60px;
        left: 185px;
        z-index:2;
        background-color:rgb(113, 113, 170);
    }

    .four {
        top: 80px;
        left: 275px;
        z-index:1;
        background-color: orange;
    }
</style>

<body>
    <div class="one">1 z-index:4</div>
    <div class="two">2 z-index:3</div>
    <div class="three">3 z-index:2</div>
    <div class="four">4 z-index:1</div>
</body>