No.23 CSS--定位

 

一、定义

  • position属性指定了元素的定位类型。

  • 其中，绝对定位和固定定位会脱离文档流.
  • 设置定位之后:可以使用四个方向值进行调整位置:Ieft、top、right、bottom.

二、相对定位

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            position: relative;
            left: 400px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

　　

三、绝对定位（脱离文档流）

  • 每设置一个绝对定位，就会有一层。
  • 两个绝对定位层之间也会出现压盖的情况。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            position: absolute;
            left: 400px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

　　

 

四、固定定位（脱离文档流 ）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            position: fixed;
            left: 5px;
            top: 300px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

 

应用场景示例：

五、问题

  • 父级有相对定位和绝对定位，子级的相对定位和绝对定位会跟随父级的变化而变化。
  • 父级没有相对定位和绝对定位，子集的相对定位和绝对定位是基于向上一级直至文档。

 

六、z-index属性

  • 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
            z-index: 3;

　　

 

 

　　

 

 

 

posted @ 2025-02-27 16:44  百里屠苏top  阅读(11)  评论(0)    收藏  举报