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

news2025/1/20 12:05:22

注:默认情况下的定位是 postion:static;

  • 使用定位时,常常使用偏移量对位置进行描述:left、right、top、bottom
  • 定位时,使用z-indent可以元素的堆叠顺序,例:z-indent:1,出现在上层(z-index 仅能在定位元素上奏效

相对定位relative

相对定位的参考物是元素的初使位置

相对定位的特点:

  • 不影响元素本身的特性
  • 元素不脱离文档流
  • 相对于原位置进行偏移
        div{
            width: 100px;
            height: 100px;
            margin: 10px;
            font-size: 40px;
            text-align: center;
            line-height: 100px;
            background-color: orange;
        }
        div:nth-of-type(2){
            position: relative;
            left: 100px;
        }
        <div>1</div>
        <div>2</div>
        <div>3</div>


绝对定位absolute 

绝对定位的参考物是:距离最近的使用了定位的父级,父级都没有使用时找body

绝对定位的特点:

  •  元素脱离文档流
  • 行元素支持所有的css样式
  • 块元素由内容撑开宽高
  • 清除子级浮动
        div{
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            font-size: 40px;
            text-align: center;
            line-height: 100px;
            background-color: orange;
        }
        div:nth-of-type(2){
            position: absolute;
            left: 100px;
        }
        <div>1</div>
        <div>2</div>
        <div>3</div>

        .one{
            background-color: orange;
            width: 300px;
            height: 300px;
            position: relative;
        }
        .two{
            background-color: greenyellow;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        .three{
            background-color: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        <div class="one">
            <div class="two">
                <div class="three"></div>
            </div>
        </div>

 使用定位实现万能居中:

        .background{
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, .7);
        }
        .background div{
            width: 300px;
            height: 200px;
            background-color: #fff;
            /* 以下代码实现万能居中 */
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;
        }
        <div class="background">
            <div>
                万能居中公式:<br>
                position: absolute;<br>
                left: 50%;<br>
                top: 50%;<br>
                margin-left: -width/2;<br>
                margin-top: -height/2;<br>
            </div>
        </div>


固定定位fixed

参考物:浏览器窗口

固定定位的特点: 

  • 脱离文档流
  • 清除子级浮动

固定定位的实现 可以使页面中的某个元素不随浏览器的滚动而消失,例如 导航栏的固定实现

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408782.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Security 权限控制

日积月累&#xff0c;水滴石穿 &#x1f604; 前言 项目版本Boot2.3.12.RELEASESecurity5.3.9.RELEASE 官网文档 在前面的文章中&#xff0c;所有的接口只需要登录就能访问。并没有对每个接口进行权限限制。 在正式的系统中&#xff0c;一个用户会拥有一个或者多个角色&#…

三种架构模式——MVC、MVP、MVVM

目录 前言 一、MVC&#xff08;Model-View-Controller&#xff09; 1、简介 2、框架图 二、MVP&#xff08;Model-View-Presenter&#xff09; 1、简介 2、框架图 三、MVVM&#xff08;Model-View-ViewModel&#xff09; 1、简介 2、框架图 四、总结 前言 MV系列框…

微信小程序插件--wxml-to-canvas(生成图片)

一、需求 项目中要实现一个将图片分享到朋友圈的功能&#xff0c;将生成的海报转成图片保存到手机。用到了wxml-to-canvas插件。 二、官方示例使用方法 1.安装wxml-to-canvas npm install --save wxml-to-canvas2.JSON 组件声明 {"usingComponents": {"wxml-t…

多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单

本文完整版&#xff1a;《多款顶级好用的 Vue 表单设计器测评推荐&#xff0c;可拖拽生成表单》 Vue 表单设计器form-generator - 适配 Element Plus UI 框架的表单设计器form-render - 阿里团队开源表单设计器&#xff0c;自家 Antd UI 框架友好form-create - 支持Vue3 及 Ele…

内网npm私有仓库搭建以及使用教程

前言 前端团队沉淀一套通用的UI库、工具类、脚手架&#xff0c;不允许在公网发布&#xff0c;内网npm私有库搭建需求应运而生。如何在内网环境搭建npm私有仓库并使用&#xff1f;主角登场了 —— Verdaccio。接下来我来教大家使用 verdaccio 在内网环境中搭建npm私有仓库。 基…

canvas详细入门教程(1W字 吐血分享)

大家好&#xff0c;我是潘潘 今天为大家带来的是我已经写了很久了的canvas详细教程&#xff0c;对入门canvas很有帮助。 点击跳转原文&#xff1a; canvas详细教程原文 canvas是什么&#xff1f; 简单来说&#xff0c;<canvas> 是HTML5中的标签&#xff0c;它是一个容…

20分钟学会flex布局,熊二都表示学会了,你呢?

✏️ 作者&#xff1a;大二计算机专业学生 ♉ 星座&#xff1a;金牛座 &#x1f3e0; 主页&#xff1a;查看更多文章 &#x1f3c2; 关键&#xff1a;flex 前端布局 熊二都会 大家好&#xff0c;我是小周&#xff0c;今天分享的是熊二都能学会的前端 flex 布局&#xff0c;篇幅…

小程序 getActivePinia was called with no active Pinia. Did you forget to install pinia?

小程序项目使用pinia做状态管理报错&#xff1a; Error: [&#x1f34d;]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia createPinia() app.use(pinia) app运行打包时有个同样的错误 错误原因是&#xff1a;在外部js/t…

Collections类详解

目录 一.Collections概述&#xff1a; 1.1什么是Collections类&#xff1a; 1.2 Collections类和collection的区别和联系&#xff1a; 二. Collections类的主要方法&#xff1a; 一.Collections概述&#xff1a; 1.1 什么是Collections类&#xff1a; Java.util.Collections…

【Node.js】Express框架的基本使用

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 目录 初识Express Express简介 什么是Express 进一步理解 Express Express能做什么 Express的基本使用 …

前端登录退出:处理Token问题(获取、缓存、失效处理)以及代码实现

目录一、什么是Token二、获取token三、Token失效处理注意点1、主动退出2、Token过期① 逻辑图②方案③代码实现3、被人顶号① 逻辑图② 方案③代码实现一、什么是Token Token是服务端生成的一串字符串&#xff0c;当用户第一次登陆成功后&#xff0c;服务器会生成一个token&am…

vue 实现自适应屏幕

1.安装自适应屏幕插件&#xff08;优先使用vscode安装&#xff0c;需要调整px转化rem比例&#xff09; &#xff08;1&#xff09;安装插件&#xff1a; npm i lib-flexible --save &#xff08;2&#xff09;mian.js引入&#xff1a; import lib-flexible/flexible.js 2. 如果…

java中controller层是干嘛的?

最近在研究开源框架的源码&#xff0c;打算改写开源框架&#xff0c;适用于自身的业务场景。于是找到了一个框架(spiderFlow)。 根据他的git上的教程&#xff0c;搭建了一个。 controller层&#xff0c;在我们写代码的时候&#xff0c;一般为接口层&#xff0c;与前端&#xf…

CSS锥形渐变实现环形进度条

10月份因为疫情原因、又开启了居家办公模式&#xff0c;空闲之余&#xff0c;与其选择“躺平”&#xff0c;不如去做一些有意义的事情&#xff0c;内心的想法驱使着我去做些什么&#xff0c;但是又没有合适的素材&#xff0c;直到接手了最近的一个可视化项目&#xff0c;一个图…

若依框架---权限管理设计

前言 若依权限管理包含两个部分&#xff1a;菜单权限 和 数据权限。菜单权限控制着我们可以执行哪些操作。数据权限控制着我们可以看到哪些数据。 菜单是一个概括性名称&#xff0c;可以细分为目录、菜单和按钮&#xff0c;以若依自身为例&#xff1a; 目录&#xff0c;就是页…

关于古老的jsp页面的知识汇总(超详细)

1. 为什么要开发出来jsp文件呢&#xff1f; 面对需要将大量的结果&#xff0c;甚至是一整个<html>页面返回给响应体&#xff0c;之前的方法就显得十分麻烦。 之前我们是这样将结果返回给响应体的&#xff0c;如下图&#xff1a; 于是就设计了jsp文件&#xff0c;用来解决…

antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制

限制上传文件格式.rar、.zip、.pdf、.jpg、.png、.docx antd 中upload对于限制上传文件格式的属性是accept&#xff0c;在开发的过程中&#xff0c;accept对于.doc、.docx、.pdf、.png、.jpg、.rar&#xff0c;格式的限制是完全没有问题的。但是测试和我说&#xff0c;当选择文…

前端开发之vue-grid-layout的使用和实例

前端开发之vue-grid-layout的使用和实例前言效果图一、vue中简单案例1、安装组件NPMYarn2、vue文件二、vue3使用&#xff08;vue文件&#xff09;1、需要导入vue3支持的该版本插件2、在mian.js里引入&#xff1a;三、在IE上无法打开&#xff0c;并报错缺少&#xff1a;&#xf…

【TypeScript基础】TypeScript之常用类型(下)

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 上篇文章讲解了TypeScript的一些常用类型&#xff0c;&#x1f449;&#x1f3fb;详细内容请阅读【TypeScript基础】TypeScript之常用类型&#xff08;上&#x…

解决TypeError: Cannot read properties of undefined (reading ‘NormalModule‘)的三种方案

目录 前言 第一种 第二种 第三种 前言 大家好呀&#xff01;我是爷爷的茶七里香&#xff0c;今天遇到了一件&#x1f95a;疼的事&#xff0c;一个vuevant写的APP&#xff0c;更换了电脑之后运行不起来&#xff0c;就很奇怪很离谱&#xff0c;报错信息如下&#xff1a; ER…