当前位置: 首页 > 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…...

Speechless:三步完成微博PDF备份的终极免费Chrome扩展

Speechless&#xff1a;三步完成微博PDF备份的终极免费Chrome扩展 【免费下载链接】Speechless 把新浪微博的内容&#xff0c;导出成 PDF 文件进行备份的 Chrome Extension。 项目地址: https://gitcode.com/gh_mirrors/sp/Speechless 在数字时代&#xff0c;我们的社交…...

Java 大厂面试 200 题完整版含答案解析

前言本文整理了近两年从阿里、腾讯、字节、美团、京东、拼多多等大厂面试中高频出现的 200 道 Java 面试题&#xff0c;覆盖 Java 基础、集合、并发、JVM、Spring、MySQL、Redis、消息队列、分布式、场景设计 等核心模块&#xff0c;每题都附有简明扼要的答案解析&#xff0c;助…...

地下态势智能研判,拔高硐室深部安全透明管控等级技术白皮书

地下态势智能研判&#xff0c;拔高硐室深部安全透明管控等级技术白皮书 副标题&#xff1a;全要素三维动态重建井下场景&#xff0c;融合井下无感坐标解算、跨断面跨镜轨迹串联、身体指纹人员轨迹存档&#xff0c;井下风险前置感知、动态全程透明追溯 前言 矿山井下深部硐室与纵…...

Unlock Music Electron:3步解锁你的加密音乐文件,重获音乐自由终极指南

Unlock Music Electron&#xff1a;3步解锁你的加密音乐文件&#xff0c;重获音乐自由终极指南 【免费下载链接】unlock-music-electron Unlock Music Project - Electron Edition 在Electron构建的桌面应用中解锁各种加密的音乐文件 项目地址: https://gitcode.com/gh_mirro…...

如何免费高效优化电脑性能:UXTU终极调优指南

如何免费高效优化电脑性能&#xff1a;UXTU终极调优指南 【免费下载链接】Universal-x86-Tuning-Utility Unlock the full potential of your Intel/AMD based device. 项目地址: https://gitcode.com/gh_mirrors/un/Universal-x86-Tuning-Utility Universal x86 Tuning…...

Iris API错误处理机制与嵌入式系统优化实践

1. Iris API错误处理机制解析在嵌入式系统开发中&#xff0c;API的健壮性直接影响整个系统的稳定性。Iris框架作为ARM架构下的核心组件&#xff0c;其错误处理机制基于JSON-RPC 2.0规范进行了深度定制&#xff0c;特别适合资源受限的嵌入式环境。与通用Web API不同&#xff0c;…...

轻量级配置中心zcf:中小团队微服务配置管理实战指南

1. 项目概述&#xff1a;一个轻量级、高可用的配置中心最近在梳理团队内部的技术栈&#xff0c;发现一个挺有意思的现象&#xff1a;很多中小型项目&#xff0c;甚至是一些快速迭代的业务线&#xff0c;在配置管理上依然处于一种“原始”状态。要么是各种application.yml、appl…...

基于声明式Web自动化框架Hydra的电商数据监控实战

1. 项目概述&#xff1a;一个被低估的自动化利器 如果你经常需要处理一些重复性的、基于Web界面的操作&#xff0c;比如批量下载某个网站的资源、定时填写表单、或者监控网页内容的变化&#xff0c;那么你很可能已经厌倦了手动点击和等待。传统的脚本编写&#xff0c;尤其是涉及…...

AI驱动命令行工具:用自然语言生成Shell命令,提升开发运维效率

1. 项目概述&#xff1a;一个能“读懂”你意图的智能命令行工具如果你和我一样&#xff0c;每天有大量时间泡在终端里&#xff0c;那么对命令行工具的效率追求几乎是永无止境的。敲命令、查参数、记路径、处理错误……这些琐碎的操作虽然基础&#xff0c;却实实在在地消耗着我们…...

救砖实录:河南联通B860AV2.1U变砖后,我是如何通过线刷救活的(S905LB+NAND闪存方案)

从绝望到重生&#xff1a;B860AV2.1U机顶盒线刷救砖全流程拆解 那天晚上十一点半&#xff0c;当我第七次按下机顶盒电源键却依然只看到指示灯诡异闪烁时&#xff0c;后背的冷汗已经浸透了T恤——这个价值四百多的联通定制设备&#xff0c;在我尝试刷入第三方固件后彻底变成了一…...