当前位置: 首页 > news >正文

CSS常用定位

 一、relative

相对原先的位置进行定位

{position: relative;left: 50px;         /*  相对原先位置左边的距离 */top: 100px;         /*  相对原先位置上边的距离 */
}

二、absolute

绝对定位,是相对于最近有定位的父级元素进行定位

{position: absolute;right: 50px;            /*  右边距离父级元素的距离 */bottom: 100px;          /*  下边距离父级元素的距离 */
}

三、fixed

固定定位,不会随着页面滚动而滚动,相当于定在了页面上

{position: fixed;left: 50px;         /*  距离页面最左侧的距离  */top: 100px;         /*  距离页面最上边的距离  */
}

四、sticky

粘性定位,在没到达指定位置之前会进行滚动,到达指定位置会定在页面上

{position: sticky;top: 20px;          /*  距离页面上边20px时粘定,可以换成left、right、bottom */
}

相关文章:

CSS常用定位

一、relative 相对原先的位置进行定位 {position: relative;left: 50px; /* 相对原先位置左边的距离 */top: 100px; /* 相对原先位置上边的距离 */ } 二、absolute 绝对定位,是相对于最近有定位的父级元素进行定位 {position: absolute;righ…...

【Linux】从零开始使用多路转接IO --- select

碌碌无为,则余生太长; 欲有所为,则人生苦短。 --- 中岛敦 《山月记》--- 从零开始认识五种IO模型 1 前言2 认识多路转接select3 多路转接select等待连接4 完善代码5 总结 1 前言 上一篇文章我们讲解了五种IO模型的基本概念,并…...

ArcGIS Pro SDK (二十一)渲染

ArcGIS Pro SDK (二十一)渲染 文章目录 ArcGIS Pro SDK (二十一)渲染1 定义唯一值呈现器定义2 为最新观测值设置唯一值渲染器3 为先前的观测值设置唯一值渲染器4 设置简单的渲染器以绘制轨迹线5 检查先前的观测值和轨道线可见性6 使轨迹线和先前的观测点可见7 检索当前观测…...

FPGA在物联网边缘计算中的应用!!!

FPGA(现场可编程门阵列)在物联网边缘计算中的应用正变得越来越重要。边缘计算是一种分布式计算架构,它将数据的处理分散到网络的边缘,靠近数据源,而不是集中在数据中心处理。以下是FPGA在物联网边缘计算中的几个关键应…...

【解决】Linux环境中mysqlclient安装失败问题

问题描述 在Linux系统下安装myslclient报异常。系统为Centos 8 使用 pip install mysqlclient 报出下面的异常 error: subprocess-exited-with-error Getting requirements to build wheel did not run successfully.│ exit code: 1╰─> [30 lines of output]/bin/sh: pkg…...

✨ Midjourney中文版:创意启航,绘梦无界 ✨

Midjourney AI超强绘画 (原生态系统)用户端:Ai Loadinghttps://www.mjdiscord.com 项目详细介绍飞书文档:Docshttps://ivqklkndl4k.feishu.cn/docx/GRnMdCbcooWkwTx1RU4cZjGVnzb?fromfrom_copylk 🌐 无缝体验,中文定制…...

软件(1)

软件 常考软件 图像软件 Flash 一款二维动画处理软件 photoshop 图像处理界的“巨无霸” ACDSee ACDSee是常用的图片管理编辑软件,尽管也可以支持WAV格式的音频播放, 但目前主要是作为看图软件 音频软件 Winamp Winamp是数字媒体播放的先驱Audition Audi…...

linux perf 环境部署和基本测试(基于Ubuntu20.04)

1,linux 安装perf sudo apt-ge install linux-tools-common sudo apt-get install linux-tools-$(uname -r) linux-tools-generic -y 2 补充安装 sudo apt-get install python3-q-text-as-data 3,perf常用命令 larkubuntu:~$ perf usage: perf [--version] [--hel…...

【网络面试篇】HTTP(1)(笔记)——状态码、字段、GET、POST、缓存

目录 一、相关问题 1. HTTP请求常见的状态码和字段? (1)状态码 (2)字段 ① Host 字段 ② Content-length 字段 ③ Connection 字段 ④ Content-Type 字段 ⑤ Content-Encoding 字段 2. GET 和 POST 的区别&a…...

HTML 基础标签——分组标签 <div>、<span> 和基础语义容器

文章目录 1. `<div>` 标签特点用途示例2. `<span>` 标签特点用途示例3. `<fieldset>` 标签特点用途示例4. `<section>` 标签特点用途示例5. `<article>` 标签特点用途示例总结HTML中的分组(容器)标签用于结构化内容,将页面元素组织成逻辑区域…...

SS928V100 ISP常见问题列表

下载链接&#xff1a; https://download.csdn.net/download/quantum7/89948226 1 FAQ 1 1.1 ISP 1 1.1.1 如何解决整体锐度不足 1 1.1.2 如何解决图像发蒙问题&#xff0c;提高通透性 2 1.1.3 如何解决低照度清晰度差 2 1.1.4 如何解决图像清晰度与物体边缘白边和黑边问题…...

AI写诗:自动版大唐宫体诗

大唐学子&#xff0c;手拿一本小卷&#xff08;类书&#xff09;&#xff0c;从中挑选过去他们&#xff08;权威&#xff09;认为好的词来拼接一首诗&#xff0c;此类诗词称作“宫体诗”&#xff0c;在初唐时期甚是流行。 写“宫体诗”的过程有木有那么一丝丝的熟悉&#xff1f…...

Java复习31(PTA)

sdust-Java-字符串集合求并集 分数 15 全屏浏览 切换布局 作者 张峰 单位 山东科技大学 从键盘接收N个英文字符串&#xff08;其中不同的字符串数量大于10&#xff09;&#xff0c;从头开始取5个不同的字符串放入一个集合S1&#xff0c;然后接着取5个不同的字符串放入另一个…...

【Linux系列】Linux 系统中的软连接管理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

@layer(级联层)

在css样式表(文件)中声明layer为样式添加级联层,其意义在于可以使用它重新定义样式的叠层关系. layer后声明的级联层里面的样式将覆盖前声明的级联层里面的相同属性.在级联层外声明的样式会覆盖级联层里面的相同属性样式,同一层级里面的样式冲突,依然按照优先级来计算. 在级联层…...

nginx代理websocket服务

一、nginx代理websocket服务 一&#xff09;nginx代理ws服务 在nginx中&#xff0c;可以通过proxy_pass指令来代理WebSocket服务。 以下是一个示例配置&#xff1a; map $http_upgrade $connection_upgrade {default upgrade; close; }upstream ws_backend {server 127.0.0.1:…...

第二十七章 Vue异步更新之$nextTick

目录 一、概述 二、完整代码 2.1. main.js 2.2. App.vue 一、概述 需求&#xff1a;编辑标题, 弹出显示编辑框自动聚焦 1. 点击编辑&#xff0c;显示编辑框 2. 让编辑框&#xff0c;立刻获取焦点 我们常规的思路可能会编写如下代码来实现&#xff1a; 问题&#xff1a…...

【51 Pandas+Pyecharts | 深圳市共享单车数据分析可视化】

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 处理起始时间、结束时间2.4 增加骑行时长区间列2.5 增加骑行里程区间列 &#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 各…...

【Clikhouse 探秘】ClickHouse 物化视图:加速大数据分析的新利器

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…...

线程相关题(线程池、线程使用、核心线程数的设置)

目录 线程安全的什么情况用&#xff1f;情况下用线程安全的类&#xff1f; 线程池线程方面的优化 线程池调优主要涉及以下几个关键参数。 线程不安全原因? 1. 共享资源访问冲突 2. 缺乏原子操作 3. 内存可见性问题 4. 重排序问题 如何解决线程不安全的问题&#xff1…...

AMD Ryzen硬件调试终极指南:3大突破性能优化秘籍揭秘

AMD Ryzen硬件调试终极指南&#xff1a;3大突破性能优化秘籍揭秘 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://git…...

对比学习演进笔记:从Memory Bank到MoCo的负样本队列设计

1. 对比学习的核心思想与演进背景 对比学习&#xff08;Contrastive Learning&#xff09;作为自监督学习的重要分支&#xff0c;其核心思想可以用一句话概括&#xff1a;让相似样本的特征表示尽可能接近&#xff0c;不相似样本的特征表示尽可能远离。这种思想最早可以追溯到20…...

避坑指南:QT5的QListView复选框居中/对齐问题解决方案(含TableView对比)

QT5复选框对齐终极指南&#xff1a;从QListView到TableView的完美排版方案 在QT5界面开发中&#xff0c;复选框控件的视觉对齐问题堪称"程序员强迫症终结者"——明明功能已经实现&#xff0c;却总在UI细节上栽跟头。本文将带您深入解决QListView和TableView中复选框居…...

别再只用柱状图了!用Python的Matplotlib画个酷炫的雷达图,5分钟搞定你的个人技能展示

用Python打造专业级技能雷达图&#xff1a;5步提升你的职场竞争力 简历上那些千篇一律的柱状图和百分比条已经让招聘官审美疲劳了&#xff1f;试试用Matplotlib绘制一个令人眼前一亮的雷达图来展示你的核心技能组合。这种可视化方式不仅能清晰呈现你在各个领域的熟练程度&#…...

突破语言壁垒:Unity游戏翻译破局工具如何重构跨文化体验

突破语言壁垒&#xff1a;Unity游戏翻译破局工具如何重构跨文化体验 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 当你满怀期待地启动一款国际热门Unity游戏&#xff0c;却被满屏陌生文字阻挡了探索脚步…...

别再只会用百度搜了!手把手教你用site语法精准锁定CSDN、知乎等网站的技术文章

技术搜索的艺术&#xff1a;用site语法打造高效信息获取系统 每次打开搜索引擎&#xff0c;输入技术关键词后&#xff0c;铺天盖地的结果中真正有用的内容却寥寥无几——这可能是大多数开发者都经历过的困扰。广告推广、低质量转载、过时教程混杂其中&#xff0c;而真正优质的C…...

Vue3前端集成Gemma-3-12B-IT:构建智能聊天界面

Vue3前端集成Gemma-3-12B-IT&#xff1a;构建智能聊天界面 用最简单的方式&#xff0c;让你的Vue3项目拥有智能对话能力 1. 为什么要在Vue3中集成智能聊天功能 现在很多网站和应用都需要智能对话功能&#xff0c;不管是客服系统、学习助手还是内容创作工具。Gemma-3-12B-IT作为…...

Graphormer企业级应用:制药公司分子筛选流水线中的轻量部署实践

Graphormer企业级应用&#xff1a;制药公司分子筛选流水线中的轻量部署实践 1. 项目背景与价值 在药物研发领域&#xff0c;分子筛选是耗时耗力的关键环节。传统实验方法需要数月时间才能完成数千种化合物的性质测试&#xff0c;而基于AI的分子属性预测技术可以将这一过程缩短…...

56:L构建蓝队AI:蓝队的智能防御

作者&#xff1a; HOS(安全风信子) 日期&#xff1a; 2026-03-07 主要来源平台&#xff1a; GitHub 摘要&#xff1a; 面对基拉等高级威胁的不断进化&#xff0c;传统的蓝队防御手段已经难以应对。L构建了一套蓝队AI系统&#xff0c;通过AI驱动的威胁检测、自动响应和防御优化&…...

WindowsCleaner:3个步骤解决C盘爆红问题的终极指南

WindowsCleaner&#xff1a;3个步骤解决C盘爆红问题的终极指南 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否也经历过C盘突然变红、系统卡顿不堪的困扰&a…...