CSS定位布局

最新推荐文章于 2023-09-18 17:32:45 发布

CodePoorFish

最新推荐文章于 2023-09-18 17:32:45 发布

阅读量1k

点赞数

分类专栏：前端笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43350001/article/details/122780938

版权

前端笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS定位布局

简介
固定定位：fixed
相对定位：relative
绝对定位：absolute
静态定位：static

简介

定位布局，相比较浮动布局的比较灵活但不容易控制，它能精准定位页面中的任意元素。但是，由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来限制。CSS定位可以将一个元素精确地放在页面上指定的地方。

布局定位共有四种方式：

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

这四种方式都是通过position属性来实现的，position属性取值如下：
在这里插入图片描述

固定定位：fixed

所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。

position:fixed;是结合top、bottom、left和right这四个属性一起使用的，其中position:fixed;使得元素成为固定定位元素，接着使用top、bottom、left和right这四个属性来设置元素相对浏览器的位置。

top、bottom、left和right这四个属性不一定全部都用到，一般只会用到其中两个。注意，这四个值的参考对象是浏览器的四条边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .first{
            width: 60px;
            height: 1660px;
            background-color: #b7f1ff;
            border: 1px solid gray;
        }

        .second{
            position: fixed;
            top: 30px;
            left: 160px;
            width: 60px;
            height: 60px;
            background-color: hotpink;
            border: 1px solid silver;
        }
    </style>
</head>
<body>
    <div class="first">无定位的div元素</div>
    <div class="second">固定定位的div元素</div>
</body>
</html>

在这里插入图片描述
拖动浏览器的滚动条，其中有固定定位的div元素不会有任何位置改变，但没有定位的div元素会改变，这里只使用了top和left属性来设置元素相对于浏览器顶边和左边的距离就可以准确定位该元素的位置了。

固定定位最常用于实现返回顶部功能。

相对定位：relative

所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。position:relative;是结合top、bottom、left和right这四个属性一起使用的，其中position:relative;使得元素成为相对定位元素，接着使用top、bottom、left和right这四个属性来设置元素相对原始的位置。

在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .father{
            margin-top: 30px;
            margin-left: 30px;
            border: 1px solid silver;
            background-color: lightskyblue;
        }
        .father div{
            width: 100px;
            height: 60px;
            margin: 10px;
            background-color: hotpink;
            color: aliceblue;
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">无定位的div元素1</div>
        <div class="son2">相对定位的div元素</div>
        <div class="son3">无定位的div元素2</div>
    </div>
</body>
</html>

初始模样：
在这里插入图片描述
为第二个div元素加入相对定位：

.son2{
    position: relative;
    top: 20px;
    left: 40px;
}

在这里插入图片描述

绝对定位：absolute

绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。

一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。

默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

我们继续使用上述例子，为第二个div元素加入绝对定位：

.son2{
    position: absolute;
    top: 20px;
    left: 40px;
}

在这里插入图片描述

静态定位：static

在默认情况下，也就是元素没有指定position属性时，这个元素就是静态定位的。也就是说元素position属性的默认值是static。一般情况下我们使用不到position:static，如果想要使得元素从其他定位方式变成静态定位，就需要使用position:static来实现。

CodePoorFish

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS定位布局

CSS定位布局简介固定定位：fixed相对定位：relative绝对定位：absolute静态定位：static简介定位布局，相比较浮动布局的比较灵活但不容易控制，它能精准定位页面中的任意元素。但是，由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来限制。CSS定位可以将一个元素精确地放在页面上指定的地方。布局定位共有四种方式：固定定位（fixed）相对定位（relative）绝对定位（absolute）静态定位（static）这四种方式都是通过position属性来实现的，
复制链接

扫一扫

专栏目录