static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)

最新推荐文章于 2024-04-19 15:59:41 发布

starz*

最新推荐文章于 2024-04-19 15:59:41 发布

阅读量9.5k

点赞数 10

文章标签： html css js javascript html5

本文链接：https://blog.csdn.net/qq_44939011/article/details/107473996

版权

static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)

Position的取值：

static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。

fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。

relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。

absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。

1.static(静态定位)

如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。

说白了，平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。

2.fixed（固定定位）

当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。(对应页面尾代码块1)

在这里插入图片描述

3.relative(相对定位)与absolute(绝对定位)

首先设置一个简单的页面用做后续分析(如图)对应页面尾代码块2:

在这里插入图片描述

将div2的position属性设置为relative：

<style  type="text/css">
        #container{
            width: 1000px;
            margin: auto;
        }
        .div1{
            height: 100px;            
            background-color: royalblue;
        }
        .div2{
            height: 100px;
            background-color: blueviolet;
            position: relative;
            top: 30px;
            left: 30px;
        }
        .div3{
            height: 100px;          
            background-color: deeppink;
        }
        .div4{
            height: 100px;          
            background-color: deepskyblue;
        }
    </style>

在这里插入图片描述

定位为relative的元素脱离正常的文档流中,但其在文档流中的原位置依然存在,后面的无定位元素仍然不会“挤上来”。

将div2的position属性设置为absolute：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaT0iuGy-1595250927012)(images/4-1595248465444.png)]

定位为absolute的层完全脱离正常文档流了，和relative层不同的是，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。并且在没有给div设置宽度的情况下设为absolute的层宽度就是其中的内容宽度。

在这里可能大家会发现为什么设置为absolute的层不在container(上图中的黑框)层内，而设置为relative的层还在container(上图中的黑框)层内？请继续看下文分析。

这里一共有4个带有颜色的div，并且4个div都放在id为container的层里

<body>
    <div id="container">
        <div class="div1">第一个div</div>  
        <div class="div2">第二个div</div>
        <div class="div3">第三个div</div>
        <div class="div4">第四个div</div>
    </div>        
</body>

container层和div2层的css代码

    <style  type="text/css">
        #container{
            width: 1000px;
            margin: auto;
		}
          .div2{
            height: 100px;
            background-color: blueviolet;
            position: absolute;
            top: 30px;
            left: 30px;
        }
    </style>

top和left是相对于离它最近且不是static定位的父元素来定位的，在此div2的直接父元素是id为container的层，但有父元素并没有设置position属性，所以div2要继续向上寻找间接父元素，于是找到相对于根元素即body元素来定位。

如果为container层真加position属性：

<style  type="text/css">
        #container{
            width: 1000px;
            margin: auto;
            position: relative;
        }
        .div2{
            height: 100px;
            background-color: blueviolet;
            position: absolute;
            top: 30px;
            left: 30px;
        }
    </style>

效果图：

在这里插入图片描述此时div2层定位时相对的父元素就是container层。

还有一个小知识补充：absolute定位的子元素宽度不会影响父元素的宽，而relative定位的子元素会撑大父元素。分析如下：

我们把div1,div3,div4层去掉，并且为container层设置定位属性为absolute。div2层的定位属性为relative；

<style  type="text/css">
        #container{
        
            margin: auto;
            position: absolute;
            background-color: hotpink;
        }   
        .div2{
            height: 100px;
            background-color: blueviolet;
            position: relative;
            top: 30px;
            left: 30px;
        }
    </style>

效果图：

在这里插入图片描述

我们发现代码中没有设置div2宽度，div2层的宽度会等于父元素宽度

为div2层添加宽度，并且删除container层宽度：

<style  type="text/css">
        #container{
            margin: auto;
            position: absolute;
            background-color: hotpink;
        }   
        .div2{
            height: 100px;
            width: 1000px;
            background-color: blueviolet;
            position: relative;
            top: 30px;
            left: 30px;
        }
    </style>

效果图：

在这里插入图片描述

本文参考：https://blog.csdn.net/weixin_42067967/article/details/80152403；

代码块1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fixed</title>
    <style type="text/css">
        .test
        {     
            width:60px;
            height:60px;
            border:1px solid silver;
            background-color:#FA16C9;
        }
        #div1{
            position:fixed;/*设置元素为固定定位*/
            top:100px;/*距离浏览器顶部30px*/
            left:100px;/*举例浏览器左部160px*/
        }
        #div3{
            position:fixed;/*设置元素为固定定位*/
            top:100px;/*距离浏览器顶部30px*/
            right:100px;/*举例浏览器左部160px*/
        }
        #div2{
            width:500px;
            height:1000px;
            margin: auto;
            border:1px solid gray;
            line-height:600px;
            background-color:#B7F1FF;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="div1" class="test">固定定位的div元素</div>
    <div id="div2">参考层</div>
    <div id="div3" class="test">固定定位的div元素</div>
</body>
</html>

<!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  type="text/css">
        #container{
            width: 1000px;
            margin: auto;              
        }
        .div1{
            height: 100px;            
            background-color: royalblue;
        }
        .div2{
            height: 100px;
            background-color: blueviolet;
        }
        .div3{
            height: 100px;          
            background-color: deeppink;
        }
        .div4{
            height: 100px;          
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="div1">第一个div</div>  
        <div class="div2">第二个div</div>
        <div class="div3">第三个div</div>
        <div class="div4">第四个div</div>
    </div>        
</body>
</html>

       background-color: deepskyblue;
    }
</style>

第一个div

第二个div

第三个div

第四个div

```

starz*

关注

10
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)

static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)Position的取值：static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。1.static(静
复制链接

扫一扫