CSS定位详解-优快云博客

本文链接：https://blog.youkuaiyun.com/CHMBK/article/details/101023064

CSS定位

position:static 静态定位（默认情况下的定位，是没有效果的。）
position:relative 相对定位（相对于原来的位置进行定位，占用原文档流的空间）
position:absolute 绝对定位（相对于定位了的父级或者body进行定位，一般在父级使用relative进行定位，子级相对于父级进行绝对定位，不占用原文档流空间）
position:fixed 相对于浏览器窗口定位

<style>
.d1{
            background-color:black;
            width: 70%;
            height: 1000px;
        }
        .d2{
            background-color: blue;
            width: 20%;
            height: 150px;
        }
        .d3{
            background-color: red;
            width: 20%;
            height: 150px;
        }
        .d4{
            background-color: yellow;
            width: 20%;
            height: 150px;
        }
        <style>
        <body>
    <div class="d1">
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
    </div>
</body>