CSS positioning (定位)-CSDN博客

本文链接：https://blog.csdn.net/liboy0001/article/details/131484572

CSS positioning (定位)

CSS position 属性允许将布局的一部分与另一部分重叠，常见的定位有四个分别是:静态定位 static 、固定定位 fixed 、相对定位 relative 、绝对定位 absolute

static 静态定位

HTML 元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right 影响。

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>
        .pic {
            position: fixed;
            top: 50px;
            right: 0px;
            width: 60px;
            height: 400px;
        }
    </style>
</head>

<body>
    <!-- 注意点 -->
    <!-- 1.固定定位脱离的标准流 不占位置
    2.固定定位是参照浏览器来定位的
    3.固定定位固定在一个地方一动不动 -->
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <p>小董不懂事</p>
    <img src="./images/floor1.jpg" alt="" class="pic">

</body>

</html>

relative 定位

相对定位不脱离标准流,在页面中占位置
相对定位只适合小范围移动
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
    h2.pos_left
    {
    	position:relative;
    	left:-20px;
    }
    
    h2.pos_right
    {
    	position:relative;
    	left:20px;
    }
</style>
</head>

<body>
    <h2>这是一个没有位置的标题</h2>
    <h2 class="pos_left">此标题根据其正常位置向左移动</h2>
    <h2 class="pos_right">此标题根据其正常位置向右移动</h2>
    <p>相对定位相对于元素的原始位置移动元素。</p>
    <p>风格”左：-20px“从元素的原始左位置减去20个像素。</p>
    <p>“样式”左：20px“将20像素添加到元素的原始左侧位置。</p>
</body>

</html>

absolute 绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于页面
绝对定位默认是脱离标准流在页面中不占位置
绝对定位一般搭配相对定位使用

<!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>
        .box {
            width: 500px;
            height: 500px;
            background-color: chartreuse;
            position: relative;
        }

        .one {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            top: 100px;
            right: -50px;

        }
    </style>
</head>

<body>

    <div class="box">
        <div class="one"></div>
    </div>
</body>

</html>

z-index 属性

元素的定位与标准流无关，所以它们可以覆盖页面上的其它元素

z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在上面，或下面）

一个元素可以有正数或负数的堆叠顺序：

<!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>
        .one {
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            background-color: pink;
            position: absolute;
            z-index: 1;
        }

        .two {
            width: 300px;
            height: 300px;
            background-color: chartreuse;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>

</html>