七.CSS的定位

最新推荐文章于 2024-06-15 21:20:00 发布

戴代_

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量178

点赞数 1

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

本文链接：https://blog.csdn.net/m0_49879527/article/details/108252830

版权

前端笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、CSS定位的概念

在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，现在我们就讲解css定位相关的属性，定位可以分为三类，

绝对定位
相对定位
固定定位

二、理解

我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、right属性来设置元素的坐标。

1.绝对定位

绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
将一个元素设置下面的属性：
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color: #f00;
            border:1px solid #0f0;
        }
        .pos{
            position: absolute; /*设置绝对定位元素*/
            top:50px;           
            left:50px;
        }
    </style>
</head>
<body>
    <!-- 一个元素可以设置多个class属性，用空格区分开 -->
    <div class="box">1</div>
    <div class="box pos">2</div>
    <div class="box">3</div>
</body>
</html>

从上面代码的效果中，我们可以了解以下几点：

绝对定位元素脱离文档流，并不占位，第一个div和第三个div相邻。
原点在整个网页左上角的位置。
定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离最近的已定位的祖先元素的距离。

2.相对定位

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color: #f00;
            border:1px solid #0f0;
        }
        .pos{
            position: relative; /*设置相对定位元素*/
            top:50px;
            left:50px;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box pos">2</div>
    <div class="box">3</div>
</body>
</html>

从上面代码的效果中，我们可以了解以下几点：

相对定位元素不脱离文档流，元素占位，第一个div和第三个div不相邻，中间的间距就是相对定位元素的位置。
原点在其占位位置的左上角。
定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。

3.固定定位

相对于浏览器窗口进行定位，脱离原来的文档流
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            height:1000px;
        }
        .box{
            width:100px;
            height:100px;
            background-color: #f00;
            border:1px solid #0f0;
        }
        .box2{
            position: fixed; /*设置固定定位元素*/
            top:50px;
            left:50px;
        }
    </style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
</body>
</html>

从上面代码的效果中，我们可以了解以下几点：

固定定位元素脱离文档流，并不占位，第一个div和第三个div相邻。
我们将body元素的高度设置成1000px，这样我们就可以通过滚轮控制网页显示的位置。
原点在浏览器当前窗口的左上角。
定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。
当滑轮滚动的时候，固定定位元素永远相对于窗户的位置定位。

4.设置参照物

理解了上面三种定位方法，我们再来考虑开始提到的那个问题，如果我们希望将一个数字列表压在一张图片之上。居中显示在网页之上，我们将数字列表设置定位之后，坐标应该设置成多少呢？因为居中的图片与浏览器窗口的左边距是不固定的，所以没有办法设置成一个固定值，这个时候，我们就需要给定位元素设置参照物。
将父级元素设置定位元素，那么子级元素定位的坐标原点会设置为父级元素左上角的位置。代码如下所示。
代码如下（示例）：

<div class="container">
    <div class="box"></div>
</div>
 .container{
    width:300px;
    height:300px;
    border:1px solid blue;
    position: relative;;
    top:100px;
    left:100px;
}
.box{
    border:blue 4px solid;
    width:100px;
    height:100px;
    position:absolute;
    top:10px;
    left:20px;
}

父级容器不管是绝对定位，相对定位还是固定定位，都可以实现作为参照物的效果，在实际项目开发中，常用方法（子绝父相）如下所示：

如果父级元素不脱离文档流，参与正常排版，那么父级设置相对定位。
如果父级需要根据视窗的显示位置而变化位置，可以设置固定定位。
一般父级容器不设置绝对定位。

戴代_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
七.CSS的定位

目录一、CSS定位的概念二、理解1.绝对定位2.相对定位3.固定定位4.设置参照物一、CSS定位的概念在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，现在我们就讲解css定位相关的属性，定位可以分为三类，绝对定位相对定位固定定位二、理解我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、right属性来设置元素
复制链接

扫一扫