CSS-position 定位_css 相对父元素定位-优快云博客

本文详细介绍了CSS的定位属性，包括普通流、浮动、静态、相对、绝对和固定定位方式，以及如何通过偏移量控制元素位置和堆叠顺序。通过实例演示了不同定位方式的应用。

1.介绍

css定位属性允许对元素进行定位改变其在页面的位置。
css有三种基本定位机制：普通流、浮动和绝对定位。
普通流的元素的位置由元素在html中的位置决定。

2.定位属性

　　设置偏移量：left、right、top、bottom（左、右、上、下）

3.定位方式

　①静态定位(static)：(很少用)

　　　　默认值，默认布局。

　②相对定位(position:relative)：（重点）
　　　　设置偏移量：left、right、top、bottom
　　　　不会脱离文档流（从上往下）

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <!-- <link rel="stylesheet" href="../position.css/position1.css"> -->
 8 
 9     <style>
10         .box1{
11     width: 300px;
12     height: 200px;
13     border: 2px solid blue;
14     background-color: aqua;
15 }
16 .box2{
17     /* 盒子2宽高300*200 */
18     width: 300px;
19     height: 200px;
20     /* 盒子2边框、背景色 */
21     border: 2px solid black;
22     background-color: blueviolet;
23     /* 盒子2偏移量：上、左 */
24     top: 100px;
25     left: 100px;
26     /* 相对自己定位 */
27     position: relative;
28 }
29     </style>
30 </head>
31 <body>
32     <div class="box1">盒子1</div>
33     <div class="box2">盒子2</div>
34 </body>
35 </html>

视图：

　③绝对定位(position:absolute)：（重点）
　　　　设置偏移量：left、right、top、bottom
　　　　脱离文档流（从上往下）

代码：

<!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> / 盒子1 / .box1{ width: 200px; height: 150px; border: 2px solid black; background-color: pink; } / 盒子2 绝对固定左偏移 100px / .box2{ width: 200px; height: 150px; border: 2px solid blue; background-color: palegreen; / 绝对固定左偏移 100px / position: absolute; left: 100px; } / 盒子3 / .box3{ width: 200px; height: 150px; border: 2px solid red; background-color: purple; } </style> </head> <body> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> </body> </html>

视图：

　④父相子绝：(嵌套)（重点）
　　配合使用：
　　　　1.给父元素设置相对定位
　　　　2.给子元素设置绝对定位
　　此时，绝对定位是相对于父元素的。

相对定位：相对于自己进行偏移，绝对定位相对于整个页面进行偏移
　　　　　不单独使用绝对定位

代码：

<!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>
        .box1{
            /* 盒子1 父元素 */
            width: 500px;
            height: 350px;
            border: 2px solid rebeccapurple;
            /* 相对定位  左边距为一半 */
            position: relative;
            left: 150px;
            top: 100px;
        }
        /* 盒子2 子元素 */
        .box2{
            width: 110px;
            height: 100px;
            background-color: yellow;
            border: 2px solid black;
            /* 盒子2 子元素 绝对定位 左偏移100px 上偏移200px */
            position: absolute;
            left: 100px;
            top: 200px;
        }
    </style>
</head>
<body>
    <!-- 嵌套 -->
    <div class="box1">盒子1
        <div class="box2">盒子2</div>
    </div>
</body>
</html>

视图：

　⑤固定定位(position:fixed)：

　　　　不受滚动条影响
　　　　不会脱离文档流；

代码：

<!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>
        /* body height设高一点 */
        body{
            height: 2000px;
        }
       /* 盒子2 */
       .box2{
        width: 50px;
        height: 88px;
        border: 2px solid gray;
        background-color: burlywood;
        position: fixed;
        right: 0px;
        top: 200px;
       }
    </style>
</head>
<body>
    <div class="box2">盒子2</div>
</body>
</html>

视图：

　⑥粘性定位(position:sticky)：

　　　　超过阈(yu)值一直会定位；

代码：

<!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>
        .box1{
            width: 88px;
            height: 188px;
            border: 2px solid black;
            /* 显示滚动条 */
            overflow: auto;
            /* 居中 */
            margin: 0px auto;
            /* 父元素 相对固定 */
            position: relative;
            top: 0px;
        }
        #li3{
            /* 粘性定位 top偏移20px */
            top: 20px;
            position: sticky;
            background-color: slategrey;
        }
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="box1">盒子1 
        <li>列表1</li>
        <li>列表2</li>
        <li id="li3">列表3</li>
        <li>列表4</li>
        <li>俩表5</li>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>俩表5</li>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>俩表5</li>
    </div>
</body>
</html>

视图：