CSS定位与浮动详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_42026831/article/details/80360354

1.流/静态定位：默认值 position:static 不能指定位置

2.浮动定位： float:left/right, 不能严格指定位置

3.相对定位：position：relative; 使用left/top/right/bottom进行定位

任占有页面空间；以“其自己作静态定位点”为定位原点；

4.绝对定位：position：absolute；使用left/top/right/bottom进行定位

不占用页面空间；以“最近的已定位的祖先元素的padding起点”为定位原点，且随着页面的内容滚动而滚动。

5.固定定位：position：fixed；使用left/top/right/bottom进行定位。

不占用页面空间；以body为定位原点。且不随着页面的内容滚动而滚动。

6.clear 属性：定义了元素的哪边上不允许出现浮动元素；具有以下属性

left：在左侧不允许浮动元素；

right：在右侧不允许浮动元素；

both: 在左右两侧均不允许浮动元素；

none:默认值；允许浮动元素出现在两侧；

示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动案例</title>
    <style>
        .lf{
            width:100px;
            height:100px;
            background-color:red;
            float:left;
        }
        .rt{
            width:100px;
            height:100px;
            background-color:green;
            float:right;
        }
        .ab{
            width:300px;
            height:100px;
            position:absolute;
            left:150px;
            top:150px;
            background-color:blue;
        }
        .fx{
            width:10px;
            height:100%;
            background-color:blueviolet;
            position:fixed;
            right:10px;

        }
        .cl{
            width:150px;
            height:150px;
            float:left;
            background-color:pink;
            clear:both;
        }
    </style>
</head>
<body>
<div class="lf">我是左边的盒子</div>
<div class="rt">我是右边的盒子</div>
<div class="ab">我绝对定位到左右盒子中间</div>
<div class="fx">我固定到屏幕右侧</div>
<div class="cl">我先右浮动在清除浮动</div>
</body>
</html>

css中元素的定位