前端研习录（10）——CSS相对定位、绝对定位、固定定位以及Z-index属性、opacity属性讲解及示例说明

最新推荐文章于 2023-04-15 17:13:34 发布
最新推荐文章于 2023-04-15 17:13:34 发布
阅读量466 收藏
点赞数
分类专栏： 前端研习录 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WXKKang/article/details/126084190
版权

前端研习录（10）——CSS相对定位、绝对定位、固定定位以及Z-index属性、opacity属性讲解及示例说明

版权声明

  • 本文原创作者：清风不渡
  • 博客地址：https://blog.csdn.net/WXKKang

一、定位

  重拾前端记忆，记录学习笔记，现在进入CSS定位部分，定位即是指定了元素在文档中的位置，下面来详细的看一下

1、定义

  position属性指定了元素的定位类型：

  • relative    相对定位
  • absolute    绝对定位
  • fixed    固定定位

  注意：绝对定位和固定定位会使元素脱离文档流
  设置定位之后可以对四个方向进行元素位置的调整：left、top、right、bottom

2、相对定位

  相对定位是相对于元素在文档中原本的位置进行定位，元素不脱离文档流
  将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>清风不渡</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>-----------------------------</p>
    <div class="box2"></div>
</body>
</html>

  效果如下：
在这里插入图片描述
  可以看到，由于div属于块级元素，所以由上而下进行排列，且box1与box2中有p标签进行分割，下面我们将box属性增加相对定位，并相对于上左各偏移100px，代码如下：

<!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>清风不渡</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            left: 100px;
            top: 100px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>-----------------------------</p>
    <div class="box1"></div>
</body>
</html>

  效果如下：
在这里插入图片描述
  可以看到，box1向左上方向各偏移了100px，并且由于未脱离文档流，p标签及box2位置不变，这就是相对定位

2、绝对定位

  绝对定位是相对于具有定位的父元素进行位置调整（如果父元素没有定位则一直向上逐级寻找直至顶层文档），元素脱离文档流
  将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>清风不渡</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>-----------------------------</p>
    <div class="box1"></div>
</body>
</html>

  效果如下：
在这里插入图片描述
  可以看出，box1向左上各偏移了100px，并且由于脱离了文档流，p标签与box2的位置也受到了影响

2、固定定位

  固定定位是相对于浏览器窗口进行定位，元素脱离文档流，并且不会随着滚动条的滚动进行位置移动
  将position属性设置为fixed后可声明该元素为相对定位，举例如下：

<!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>清风不渡</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: green;
            position: fixed;
            right: 100px;
            bottom: 100px;
        }
        .box1{
            width: 200px;
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>-----------------------------</p>
    <div class="box1"></div>
    <p>-----------------------------</p>
    <div class="box1"></div>
    <p>-----------------------------</p>
    <div class="box1"></div>
    <p>-----------------------------</p>
    <div class="box1"></div>
</body>
</html>

  效果如下：
在这里插入图片描述
在这里插入图片描述

  可以看出，随着滚动条的变化，固定定位的元素位置并不会发生改变，这就是固定定位

二、Z-index属性

  Z-index属性设置元素的堆叠顺序，值较大的元素会覆盖值较小的元素，举例如下：

<!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>清风不渡</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

  效果如下：
在这里插入图片描述
  由于代码是自上而下进行执行，所以box2是覆盖掉了box1，如果需要实现box1覆盖box2，则需要使用到Z-index属性，代码如下：

<!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>清风不渡</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            z-index: 2;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

  效果如下：
在这里插入图片描述

三、opacity属性

  opacity属性用于设置元素的透明度，0为完全透明，0.5为半透明，1为完全不透明，代码如下：

<!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>清风不渡</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            z-index: 2;
            opacity: 0.5;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

  效果如下：

在这里插入图片描述

  可以看出，此时box1变为了半透明
  注意：此属性仅支持IE8以上浏览器，IE8以下浏览器则需要使用alpha（opacity=透明度）进行处理，透明度为0-100之间，0为完全透明，50为半透明，100为完全不透明，代码如下：

<!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>清风不渡</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            z-index: 2;
            filter: alpha(opacity=50);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
清风不渡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中的z-index属性基本使用教程
09-27
`z-index`只对设置了定位属性（如`position: absolute`、`position: relative`或`position: fixed`）的元素生效，对于默认的静态定位（`position: static`）元素，`z-index`会被忽略。 `z-index`的语法非常简单，...
CSS 中 position:absolute 与 z-index 对层次结构影响
qq_23392341的博客
01-22 5340
http://blog.sina.com.cn/s/blog_757991900100tnqn.html 1、不使用 position 这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现. 2、使用 absolute 如两个绝对定位对象的 z-index 属性具有同样的值,
前端CSS/JS页面缩放，解决zoom导致Echarts鼠标定位偏移。
CSDN
12-06 8515
有个需求要让不同分辨率都适配到1080P的效果，以15.6寸1080P笔记本为例，页面缩放默认一般是125%，要显示真正的1080P一般是调整浏览器缩放80%（Edge），也有部分浏览器默认时125%则缩放到100%。那么能不能通过CSS实现？我看到主流的处理方法是： 确实可以达到效果，但是当使用Echart、Element部分组件时，会出现鼠标定位偏移问题，我就不列举了，因为能查到这里一般是遇到了问题的。那么有没有平替方案呢？当然有： 我们通过scale实现的效果和zoom几乎一模一样，同时避免了
css--定位：relative、absolite、fixed以及z-index
Euniceing的博客
08-17 591
css 定位
z-index失效的几种情况，父标签position属性为relative的时候,详解
小嘟的博客
09-11 8597
网上对这一方面解释的很多，我也不想把别人的都全抄过来。在这里我想的是加上我对这些情况的理解还有我的一些疑惑，若有问题，请留言，谢谢！！！话不多说，进入正题： 首先 z-index在何种情况下生效呢？ （1）首先Z-index 仅能在定位元素上奏效（也就是说要有position属性，再详细的说，它的值需要是relative、absolute、fixed） 补充：它的值也可以写成inherit，只要它的结果能是上边的三种也可以。不能是static，因为这个是默认值，相当于没有定位 首先测试定位为abso
css：四种定位（position)以及z-index层级
YangLu888
10-08 1796
css的四种定位以及z-index层级调整
zoom缩放后导致element-ui下拉框位置偏移的解决
m0_47132924的博客
09-06 4824
zoom缩放后导致element-ui下拉框位置偏移的解决
深入剖析z-index属性
09-24
在Web前端开发中，z-index属性是CSS中用于控制元素在三维空间中的堆叠顺序的关键属性。理解并熟练运用z-index能够帮助开发者解决元素重叠时的显示问题，确保元素按照预期的方式进行层叠。本文将深入探讨z-index的...
通过javascript设置css属性的代码
12-12
这一点很重要，如果一个绝对定位的且带有文本的元素放在一个有文本的元素之上，那么将会十分的混乱，那么我们就可以通过设置背景图片或者背景颜色来进行遮盖，如果必须的话我们可以将其显示的设置为”transparent”...
CSS中 opacity的设置影响了index（层数）的改变的问题总结（推荐）
09-27
`z-index`通常用于控制具有相对或绝对定位的元素的堆叠顺序，数值越大，元素越靠前，即在视觉上位于其他元素之上。 问题在于，当一个元素的`opacity`值小于1时，即使没有设置`z-index`，它也会在视觉上覆盖其他层，...
js 设置css的定位
10-30
然后，它创建了一个新的`div`元素，并设置了一些关键的定位属性： - `div.style.position = 'absolute'`：将元素设置为绝对定位。 - `div.style.left = div.style.top = '0px'`：将元素的初始位置设为左上角，距离...
【CSS】position 定位 和 z-index 层级
qq_45677671的博客
12-28 2586
position概述相对定位：relative绝对定位：absolute固定定位：fixed粘性定位：sticky 概述 position属性用于指定一个元素在文档中的定位方式。 top，right，bottom 和 left 属性则决定了该元素的最终位置。 语法： position：static/absolute/relative/fixed/sticky； 说明： static（默认值）： 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父
《CSS学习笔记》之定位：相对、绝对、固定、z-index
每天八杯水的博客
12-22 294
《CSS学习笔记》之定位：相对、绝对、固定、z-index
z-index和定位
最新发布
m0_73936682的博客
04-15 373
在style中设置，设置括号里面，（n+6）表示从第六个开始（odd）奇数（even）偶数：nth-child(n+2):nth-child(-n+9) 从第2个到第9个。
定位position（前面布局无法实现
采菊东篱下，Python满乾坤！
08-29 816
文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 定位： 1、relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解
CSS 之 z-index 属性详解
热门推荐
weixin_45092437的博客
08-26 6万+
`z-index`属性是用来设置元素的堆叠顺序或者叫做元素层级，`z-index`的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。 当父元素设置了`z-index`属性时，子元素的`z-index`属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的`z-index`属性值为准进行对比，子元素本身的`z-index`属性值无效。...
CSS绝对定位在宽屏分辨率下错位
低调走过
04-16 7704
网页兼容测试，除了做不同浏览器兼容的测试，还要观察网页在不同分辨率下的表现情况。在页面中使用了CSS绝对定位，发现在宽屏下错位。随后测试非1024*768分辨率，都有很严重的错位情况。最后找出了原因，CSS绝对定位是相对于紧邻最近的上级元素 的位置，一开始我理解为浏览器左上角，这样在不同分辨率下就会出问题，用position:relative;  声明一下参考的固定位置就OK了。如下面这段其中Top，Left都是指相对div.contentArea的位置。页面Html相关CSS定义.contentAre
绝对定位 与 z-index
WRian_Ban的小晴天
05-05 1045
运用绝对定位时，因为同级absolute元素偏移值互不影响存在覆盖现象，进一步的探索有益于以后的灵活应用。默认z-index时 不特别的设置z-index，z-index=0时他们的层叠次序只与他们的祖辈长幼和元素顺序有关。 同级absolute元素永远高于文档流。 body,html{ margin: 0; padding: 0; } .c
笔记-day08-前端基础CSS第六天.pdf
10-11
轮播图布局通常涉及到绝对定位和z-index属性的使用。通过绝对定位，可以将每个轮播图片放在同一位置，通过改变z-index的值来切换当前显示的图片，同时，使用相对定位可以为控制按钮等元素提供合适的定位。 总结，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值