css三种定位（绝对定位，相对定位和固定定位）

最新推荐文章于 2024-05-23 18:22:53 发布

一坨烤冷面

最新推荐文章于 2024-05-23 18:22:53 发布

阅读量896

点赞数 2

文章标签： css html 定位前端

本文链接：https://blog.csdn.net/weixin_50659023/article/details/108581311

版权

一：相对定位：position: relative;

相对定位position: relative;：

相对定位是相对于元素在文档中的初始位置（相对于自己原本的位置来进行移动）
首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意:在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

代码展示：

<html>
<head>
<style type="text/css">
    .box1{
        background-color: red;
        width:100px;
        height:100px;
    }
    .box2{
        background-color: yellow;
        width:100px;
        height:100px;
        position: relative;
        left: 20px;
    }
    .box3{
        background-color: blue;
        width:100px;
        height:100px;
        position: relative;
        right: 20px;
    }
</style>
</head>

<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>

</html>

效果图如下：
relative相对定位
代码解析：

box1没有定位，占标准流
box2有定位，在标准流下面继续排列（不会改变display属性，还是块元素），相对定位，距离左边20px
box3有定位，在标准流下面继续排列，相对定位，距离右边20px

注意：

position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设display:inline;display:block都是无效的。但是float在IE6下的双边距bug就是用display:inline; 来解决的。
position:relative不会隐式改变display的类型。

二：绝对定位：position: absolute;

绝对定位position: absolute;:

绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。
如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。

代码展示：

<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
    width: 200px;
    height: 200px;
    background: yellow;
}
#div2 {
    width: 50%;
    height: 50%;
    background: red;
    top: 100px;
    left: 100px;
    position: absolute;
}
</style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

效果图如下：
absolute绝对定位
代码解析：

box1 无定位占标准流
box2 有定位在标准流上层排列（会改变display属性） absolute绝对定位，距离上面100px 距离左边100px

三：固定定位：position: fixed;

固定定位position: fixed;：

相对定位是相对于元素在文档中的初始位置（说的简单点就是浏览器的位置）
首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

代码展示：

#box_fixed {
  position: fixed;
  right: 10px;
  top: 70px;
}

效果图如下：（不管页面的位置如何变化，小冰的位置始终在浏览器窗口的位置不变）
fixed固定定位
代码解析：
选择器为#box_fixed的盒子具有定位：固定定位，距离上面70px，距离右面 10px。

一坨烤冷面

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css三种定位（绝对定位，相对定位和固定定位）

css绝对定位和相对定位的区别一：绝对定位**position: absolute;**绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。#box_absolute { position: ab
复制链接

扫一扫