CSS的定位属性

已于 2023-05-12 10:38:22 修改
阅读量3.7k 收藏 10
点赞数 5
分类专栏： 前端HTML与CSS 文章标签： css css3 前端
于 2022-01-23 13:15:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45799465/article/details/122649320
版权

目录

绝对定位（position：absolute）

文档流

层叠顺序：

应用

 相对定位（ position:relative）

文档流

 层叠顺序

 应用

 固定定位（position:fixed）

文档流

层叠顺序

应用

 层叠顺序的改变（z-index）

使用场景：想要覆盖盒子或移动盒子位置的时候使用。

绝对定位（position：absolute）

文档流

一个盒子给了绝对定位以后，该盒子是悬空不占位置的，并且不会进行移动。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 绝对定位 */
            position: absolute;

        }
        h1{
            width: 400px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 并列结构下通常为竖着排列 -->
    <div></div>
    <h1></h1>
</body>
</html>

运行结果： 

层叠顺序：

默认情况下，当多个盒子同时给了定位，html在后的结构在上。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:nth-of-type(1){
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
        }
        div:nth-of-type(2){
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
        div:nth-of-type(3){
            width: 100px;
            height: 100px;
            background-color: purple;
            position: absolute;
        }
    </style>
</head>
<body>
    <!-- 多个盒子绝对定位时，html结构在后面的最先显示 -->
    <div></div>
    <div></div>
    <div></div>

</body>
</html>

运行结果： 

应用

可以通过top，left，right，bottom移动位置。参照物可以是浏览器窗口的第一屏，或者有定位设置的父元素。

参照物为第一屏时：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 绝对定位 */
            position: absolute;
            /* 设置属性 */
            left: 200px;
            top: 500px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果：

参照物为有定位的父元素时：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            margin-left:100px;;
            background-color: red;
            /* 相对定位 */
            position: relative;
        }
        p{
            width: 50px;
            height: 50px;
            background-color: black;
            /* 绝对定位 */
            position: absolute;
            left: 10px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

运行结果： 

 相对定位（ position:relative）

文档流

一个盒子给了相对对定位之后,该盒子是不悬空占位的。（也就是正常占位）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 相对定位 */
            position: relative;

        }
        h1{
            width: 400px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 并列结构下通常为竖着排列 -->
    <div></div>
    <h1></h1>
</body>
</html>

运行结果：

 层叠顺序

默认情况下,当多个盒子同时给了相对定位,盒子没有层叠的视觉效果,但是移动位置之后,可以看到层叠效果,HTML结构在后的层在上。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:nth-of-type(1){
            width: 300px;
            height: 300px;
            background-color: red;
            position:relative;
        }
        div:nth-of-type(2){
            width: 200px;
            height: 200px;
            background-color: blue;
            position:relative;
            /* 通过给负数达到盒子向上位移的效果 */
            top:-100px;

        }
        div:nth-of-type(3){
            width: 100px;
            height: 100px;
            background-color: purple;
            position:relative;
            /* 通过给负数达到盒子向上位移的效果 */
            top:-150px;

        }
    </style>
</head>
<body>
    <!-- 多个盒子相对定位时，html结构在后面的最先显示 -->
    <div></div>
    <div></div>
    <div></div>

</body>
</html>

运行结果：

盒子没有层叠的视觉效果。

 移动位置之后,可以看到层叠效果。

 应用

可以通过top  left right bottom移动位置，参照物:  自己的初始位置。

注意点:即使移动了位置,原有空间还在。

 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: red;
            /* 相对定位 */
            position: relative;
            /* 设置属性 */
            top: -50px;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

运行结果：

 固定定位（position:fixed）

文档流

一个盒子给了固定定位之后,该盒子是悬空不占位的，只是原地悬空不占位,不会进行位置移动。

层叠顺序

默认情况下,当多个盒子同时给了定位,HTML结构在后的定位层在上

应用

可以通过top  left right bottom移动位置,参照物:  浏览器的当前窗口(视口)。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /* 给整个页面设置高度，出滚动条以便观察 */
            height: 5000px;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 固定定位 */
            position: fixed;
            right: 100px;
            bottom: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果：

移动前：

 移动后：

 层叠顺序的改变（z-index）

想要改变层叠顺序,可以通过属性z-index改变。

注意：

  1. 默认值是0
  2. 数值越大层越靠上
  3. 不带单位
  4. 没有最大值和最小值
  5. 可以给负数

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:nth-of-type(1){
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
        }
        div:nth-of-type(2){
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
        div:nth-of-type(3){
            width: 100px;
            height: 100px;
            background-color: purple;
            position: absolute;
            z-index: -1;
        }
    </style>
</head>
<body>
    <!-- 多个盒子绝对定位时，html结构在后面的最先显示 ,但更改z-index属性值以后显示顺序就会改变-->
    <div></div>
    <div></div>
    <div></div>

</body>
</html>

运行结果： 

以上就是常用的三个定位的详细解释，码字不易点个赞再走吧~~~~ 

大聪明码农徐
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS定位属性
weixin_46098179的博客
03-20 459
CSS高级技巧定位
css定位属性
weixin_48180273的博客
01-28 4865
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static relative fixed absolute 1.相对定位：relative 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。 d
2024年最全css中的定位详解(1)，怒斩腾讯和阿里的Offer
最新发布
2401_84975411的博客
05-15 636
定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否（占有位置）相对于自身位置移动常用absolute 绝对定位是（不占有位置）带有定位的父级常用fixed 固定定位是（不占有位置）浏览器可视区常用sticky 粘性定位否（占有位置）浏览器可视区当前阶段少。
css中的定位属性
m0_69433535的博客
09-17 399
position:定位 可选值： static：默认值 absolute：绝对定位，脱离文档流，特点：当没有父元素或者父元素没有定位的时候， 参照物就是浏览器窗口的第一视口，当父元素有绝对定位的时候，则参照父元素定位 relative：相对定位，不脱离文档流，相对于自己的初始位置发生偏移， fixed：固定定位，脱离文档流，相对于浏览器第一视口位置不发生改变 sticky：黏性定位，脱离文档流，可以做吸顶的效果，css3新增的属性，兼容性问题
CSS属性之定位
qq_41583484的博客
02-23 946
CSS属性之定位 定位（position）作为CSS中使用频率较高的几大类属性之一，在页面布局，排版，页面功能化方面起着不可或缺的作用，其作为CSS基础中的一个较难点，成为了很多前端入门者学习的困扰，接下来我们来聊聊CSS中定位的那些事。 顾名思义，浮动强调悬浮，定位强调位置，定位的关键点在于其位置以及参照物的选取。 定位有以下几种常用属性：relative（相对），absolute（绝对），fi...
CSS定位详解
老电影故事的博客
11-25 4815
一、CSS position CSS position属性用于指定一个元素在文档中的定位方式，定位分为静态定位，相对定位，绝对定位，固定定位、粘性定位这五种其中top、right、bottom、left和z-index属性则决定了该元素的最终位置。 二、静态定位（static） 一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。 1、对边偏移无效。 2、一般用来清除定位的 3、一个有定位的盒子不想再有定位了，加上 position:static;就可以了 三、相对定位（relati
CSS定位属性详解
m0_68997646的博客
01-25 1188
CSS定位属性详解
CSS position 属性
威士忌荡出の忧伤的博客
10-14 398
定义和用法 position 属性规定元素的定位类型。 说明 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 默认值： static 继承性： no 版本： CSS2 JavaScript 语法： object.style....
CSS之position属性
西风的专栏
07-28 182
1. HTML中的三种布局方式 标准流 顺序布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>标准流</title> <style type="text/css"> .test { width: 100px;
CSS教程 CSS定位属性
09-25
CSS定位属性是网页布局设计的关键，它允许开发者精确控制元素在页面上的位置，从而实现复杂的网页布局。在CSS中，有三种主要的定位机制：普通流、浮动和绝对定位。 普通流是元素默认的布局方式，块级元素从上到下...
简明CSS定位属性position
09-25
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
采用CSS定位属性实现Html中DIV层叠与悬浮
09-25
DIV没有悬浮一说，更准确的应为层叠或者固定，下面为大家介绍的是通过CSS定位属性来实现这一效果
CSS定位.pdf
04-12
CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...
css之定位属性（相对、绝对、固定、粘性）
qq_53165476的博客
06-04 4208
2）可以使用 left、right、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值.5）粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。都发生定位的两个元素，后写的元素会盖在先写的元素之上。5）无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素.5）无论是什么元素(行内、行内块、块级) 设置为固定定位之后，都变成了定位元素。1，定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
CSS 常用样式——定位属性类型及特点
猿码互联
10-13 1601
相对定位是 CSS 中的一种定位方式，它允许我们将一个元素相对于其原始位置进行定位，而不会影响其它元素的位置和尺寸。相对定位是通过属性实现的。相对定位常用于创建位置相对于父元素的元素，以及重叠元素。我们可以使用topbottomleftright属性调整元素的位置。在上面的代码中，我们创建了一个容器元素.container和一个相对定位的元素.box。我们使用left和top属性将.box元素相对于其原始位置向右和向下移动了 50 像素。相对定位还有一个很重要的特性：它不会改变页面布局结构。
css中常用的几种定位属性
weixin_46385147的博客
02-29 1926
** position 定位 **定位是在页面布局中非常重要 css有三种基本的定位机制：普通流、浮动流、定位流。 css常用的定位属性有四种，静态定位、绝对定位、相对定位、固定定位 下面来逐一介绍 1. static （静态定位） 默认值，没有定位。也就是按照文档的书写布局自动分配在一个合适的地方。不脱离文档流。在静态定位状态下，不能配合top、bottom、left、right来改变元素的位...
css---定位
张默的博客
09-09 137
fixed定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动 p.pos_fixed { position:fixed; top:30px; right:5px; } relative 定位 相对定位元素的定位是相对其正常位置。 移动相对定位元素，但它原本所占的空间不会改变。 h2.pos_left { positio...
CSS定位布局详解
大河之犬的博客
10-03 6921
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大聪明码农徐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值