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

CSS笔记(黑马程序员pink老师前端)定位

news 文章来源：https://blog.csdn.net/qq_43701213/article/details/132693802 2025/2/7 8:44:06

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

定位 = 定位模式 + 边偏移

定位模式说明
static静态定位,按标准流特性摆放,没有边偏移,很少用
relative相对定位,相对自身原有位置移动,原有位置继续占有（不脱标）
absolute绝对定位 ,相对祖先元素移动位置（脱标）
fixed固定定位, 以浏览器的可视窗口为位置参照 （脱标）
sticky粘性定位，兼容性较差，IE不支持

绝对定位特点:
1．如果没有祖先元素或者祖先元素没有定位，则定位以浏览器为准。
2．如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。(脱标）

粘性定位特点：
1.以浏览器的可视窗口为位置参照，占有原先位置，是绝对定位和相对定位的混合。
2.必须添加top,bottom,left,right中的一个才有效。


子绝父相
如果子级使用绝对定位,则父级需要使用相对定位.

定位叠放次序z-index
z-index:1;
z轴高度，数值越大越靠上，可以为正数、零、负数，默认为auto。如果属性值相同，则按照书写的顺序，后来者居上。只有定位的盒子才有这个属性，数值后面不能加单位。


注意
1.加了绝对定位的盒子，不能通过margin:0 auto;来水平居中。
2.脱标的盒子（浮动元素、绝对定位、固定定位）不会触发外边距合并。
3.浮动元素会压住下方标准流的盒子，但不会压住盒子里的文字或图片。绝对定位、固定定位的盒子会压住下方的所有内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.div1 {margin: 10px auto;height: 3000px;width: 600px;background-color: pink;line-height: 30px;}.father {/* 父相,相对原有位置下降30px,即这里设置的行高大小,原有位置继续占有,下一个p标签显示在这个div的下方 */position: relative;top: 30px;background-color: skyblue;height: 300px;}.son {/* 子绝,不占有原有位置,下方文字向上对齐,子级盒子覆盖部分文字 */position: absolute;top: 0px;left: 200px;background-color: aquamarine;width: 100px;height: 100px;}.div1 p {/* p标签在其原有位置正好被father块完全覆盖,设置20px的上margin,使得文字显示了2/3  */margin-top: 20px;background-color: skyblue;}.div2 {position: fixed;bottom: 20px;right: 20px;height: 100px;width: 100px;background-color: aquamarine;}.div3 {/* 固定在版心旁的盒子 */position: fixed;top: 30px;/*1.走浏览器宽度的一半  */right: 50%;/* 2.利用margin,走版心的一半+空隙 */margin-right: 310px;height: 100px;width: 50px;background-color: aquamarine;}</style>
</head><body><div class="div1">版心盒子<div class="father"><div class="son">绝对定位的子级盒子</div>版心里的相对定位父级盒子<br>..................................................................................................................................</div><p>父级盒子后面的块元素</p></div><div class="div2">相对浏览器可视窗口固定的盒子</div><div class="div3">相对版心固定的盒子</div>
</body></html>

显示效果
在这里插入图片描述

相关文章：

CSS笔记(黑马程序员pink老师前端)定位

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置&#xff0c;并且可以压住其他盒子。 定位 定位模式 边偏移 定位模式说明static静态定位,按标准流特性摆放,没有边偏移,很少用relative相对定位,相对自身原有位置移动,原有位置继续占有&#xff08;不脱标…...

编程日记 2023/9/8 9:18:26

C高级Linux指令和shell脚本

XMind...

编程日记 2023/9/8 9:17:25

449. 序列化和反序列化二叉搜索树

难度&#xff1a;中等 昨天忘记做了。。。 简单学习一下官方题解 主要是&#xff1a;’ .join(map(str, arr)) int数组转String&#xff0c;中间有空格隔开 list(map(int, data.split())) String转int数组 class Codec:def serialize(self, root: TreeNode) -> str:arr […...

编程日记 2023/9/8 9:16:24

DockerCompose部署es和kibana

DockerCompose文件 version: 3.1 services:elasticsearch:image: elasticsearch:7.13.3container_name: elasticsearchprivileged: trueports:- "9200:9200"- "9300:9300"environment:- ES_JAVA_OPTS-Xms128m -Xmx1024m #设置使用jvm内存大小- cluster.na…...

编程日记 2023/9/8 9:15:23

windows系统docker中将vue项目网站部署在nginx上

一、首先在windows系统上下载并安装docker&#xff0c;要下载windows版本 https://www.docker.com/products/docker-desktop/ PS&#xff1a;安装过程中需要WSL&#xff0c;我的是win11系统&#xff0c;直接提示了我安装就可以下一步了。其他windows系统版本我不知道是否需要单…...

编程日记 2023/9/8 9:14:22

LabVIEW利用纳米结构干电极控制神经肌肉活动

LabVIEW利用纳米结构干电极控制神经肌肉活动 随着人口老龄化&#xff0c;长期护理的必要性变得更加重要&#xff0c;医疗中心的压力开始达到惊人的水平。全球对所有社会和经济部门的认识对于更好地协调卫生和社会服务之间的护理以及为更多的院外治疗提供条件至关重要。 关于医…...

编程日记 2023/9/8 9:13:21

使用PHPStudy在本地快速建立网站并实现局域网外访问（无公网IP）

文章目录 使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点&#xff0c;测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中&#xff0c;查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2.2 映…...

编程日记 2023/9/8 9:12:19

Java工具类--http请求-post

支持各类型报文与参数说明 说明&#xff1a; url : 地址timeout&#xff1a;超时时间 如3秒 3*1000contentType&#xff1a;类型 如 application/x-www-form-urlencoded application/jsonapplication/xmlrequestBody&#xff1a;报文内容 如 application/x-www-form-urlenco…...

编程日记 2023/9/8 9:11:17

HTTP【总结】

1. 当用户在浏览器输入网址回车之后&#xff0c;网络协议都做了哪些工作&#xff1f; 首先解析出URL中的域名&#xff0c;根据域名获取对应的ip地址&#xff0c;从浏览器缓存中查看&#xff0c;如果没有则从本机域名解析文件hosts中查看&#xff0c;还没有则从DNS的层层解析。…...

编程日记 2023/9/8 9:10:16

统计子岛屿

统计子岛屿 关于岛屿的相似题目&#xff1a; 岛屿数量 – 二维矩阵的dfs算法封闭岛屿数量 – 二维矩阵的dfs算法统计封闭岛屿的数目统计子岛屿不同岛屿的数量 class CountSubIslands:"""floodFill 算法1254. 统计子岛屿https://leetcode.cn/problems/count-su…...

编程日记 2023/9/8 9:09:15

docker介绍、安装及卸载

官网安装教程&#xff1a;https://docs.docker.com/engine/install/centos/ ####### Docker介绍 ########## 镜像&#xff08;image&#xff09;&#xff1a;Docker镜像就是一个只读的模板。镜像可以用来创建Docker容器&#xff0c;一个镜像可以创建很多容器。它也相当于是一…...

编程日记 2023/9/8 9:08:14

【EI/SCOPUS会议征稿】第二届环境遥感与地理信息技术国际学术会议（ERSGIT 2023）

第二届环境遥感与地理信息技术国际学术会议 2023 2nd International Conference on Environmental Remote Sensing and Geographic Information Technology 第二届环境遥感与地理信息技术国际学术会议&#xff08;ERSGIT 2023&#xff09;定于2023年11月10-12日在中国陕西西安…...

编程日记 2023/9/8 9:07:12

LabVIEW应用开发——LabVIEW2019保姆级介绍、安装、第一个程序

一、前言 LabVIEW是一种程序开发环境&#xff0c;由美国国家仪器&#xff08;NI&#xff09;公司研制开发&#xff0c;类似于C和BASIC开发环境&#xff0c;但是LabVIEW与其他计算机语言的显著区别是&#xff1a;其他计算机语言都是采用基于文本的语言产生代码&#xff0c;而Lab…...

编程日记 2023/9/8 9:06:11

《TCP/IP网络编程》阅读笔记--Timewait状态和Nagle算法

1--Timewait状态 对于服务器端/客户端&#xff0c;当一端结束连接时&#xff0c;会向另一端发送 FIN 消息&#xff1b;两端的在经过四次挥手过程后&#xff0c;其 Socket 不会马上消除&#xff0c;而是会处于一个 Time-wait 状态的阶段&#xff0c;此时 Socket 拥有的端口号并没…...

编程日记 2023/9/8 9:05:09

Python常用IDE选择与安装

1、IDE简介 选择一款高效而又顺手的IDE学习或使用Python&#xff0c;可以让你的开发之路充满激情和动力&#xff0c;让你真正投入其中。 常见的Python的IDE工具有&#xff1a; PyCharm 由JetBrains开发的Python IDE&#xff0c;功能强大&#xff0c;支持调试、代码自动完成、…...

编程日记 2023/9/8 9:04:08

Docker从认识到实践再到底层原理（三）｜Docker在Centos7环境下的安装和配置

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…...

编程日记 2023/9/8 9:03:06

Jmeter系列-Jmeter面板介绍和常用配置（2）

Jmeter面板介绍 常用菜单栏 分布式运行相关的 选项&#xff0c;可以打开日志&#xff0c;修改语言、函数助手对话框&#xff0c;还有管理插件 常用的图标 从左到右依次 新建测试计划选择测试计划模板创建一个新的测试计划打开jmeter脚本保存jmeter脚本剪切复制粘贴展开目录…...

编程日记 2023/9/8 9:02:06

2023高教社杯数学建模D题思路分析 - 圈养湖羊的空间利用率

# 1 赛题 D 题 圈养湖羊的空间利用率 规模化的圈养养殖场通常根据牲畜的性别和生长阶段分群饲养&#xff0c; 适应不同种类、不同阶段 的牲畜对空间的不同要求&#xff0c;以保障牲畜安全和健康&#xff1b;与此同时&#xff0c;也要尽量减少空间闲置所造成 的资源浪费。在实际…...

编程日记 2023/9/8 9:01:05

自动部署工具PM2

在现代应用程序开发中&#xff0c;自动化部署是一项至关重要的任务。它可以帮助我们快速、可靠地将代码部署到生产环境中&#xff0c;并确保应用程序的持续运行。在这方面&#xff0c;PM2&#xff08;Process Manager 2&#xff09;是一个备受欢迎的自动部署工具。本文将详细介…...

编程日记 2023/9/8 9:00:04

软考高级系统架构设计师系列案例考点专题三：数据库系统考点梳理及精讲

软考高级系统架构设计师系列案例考点专题三：数据库系统考点梳理及精讲 一、ORM技术二、数据库分类比较三、并发控制四、封锁协议五、不规范化带来的四大问题六、反规范化技术七、分布式数据库八、数据仓库集成数据库系统知识在架构设计师的考试里时有考查，主要考查的是数据库…...

编程日记 2023/9/8 8:59:03

【 XXL-JOB】 XXL-JOB任务分片

文章目录 前言xxl-job 分片广播任务的详细教程创建任务编写任务代码分片参数设置执行任务查看任务执行结果示例1示例2 总结 前言 xxl-job 是一个分布式任务调度平台&#xff0c;支持定时任务和分片任务。其中&#xff0c;分片任务可以将一个大任务拆分成多个小任务&#xff0c…...

编程日记 2023/9/8 8:58:02

RK3568开发笔记-SATA接口调试

目录 前言 一、sata接口介绍 物理连接 数据传输速度...

编程日记 2023/9/8 8:57:01

异步编程 - 09 Spring框架中的异步执行_@Async注解异步执行原理源码解析

文章目录 概述小结好文推荐 概述 在Spring中调用线程将在调用含有Async注释的方法时立即返回&#xff0c;Spring是如何做到的呢&#xff1f;其实是其对标注Async注解的类做了代理&#xff0c;比如下面的类Async-AnnotationExample。 public class AsyncAnnotationExample {As…...

编程日记 2023/9/8 8:56:00

django-项目

一、RESTful设计风格 基础概念 全称&#xff1a;Representational State Transfer 1.资源 网络上的一个实体&#xff0c;每个资源都有一个独一无二的URL与之对应&#xff1b;获取资源-直接访问URL即可 2.表现层 资源的表现形式 如HTML、xml、JPG、json等 3.状态转化 …...

编程日记 2023/9/8 8:54:58

红日靶场五（vulnstack5）渗透分析

环境搭建 win7 192.168.111.132&#xff08;仅主机&#xff09; 192.168.123.212&#xff08;桥接&#xff09; .\heart p-0p-0p-0win2008 ip: 192.168.111.131&#xff08;仅主机&#xff09; sun\admin 2020.comkali ip: 192.168.10.131&#xff08;nat&#xff09;vps&…...

编程日记 2023/9/8 8:53:56

掌握Gitflow的一些进阶用法

1、自定义分支命名约定&#xff1a; 默认情况下&#xff0c;GitFlow使用一套分支命名约定&#xff0c;如feature/、release/和hotfix/等前缀。然而&#xff0c;你可以根据项目的需求自定义分支名称。例如&#xff0c;你可以在分支名称中包含项目、功能或团队成员的信息&#x…...

编程日记 2023/9/8 8:52:54

算法随笔：各种经典最短路算法的简要比较总结

有多种最短路径的应用场景&#xff0c;它们需要用到不同的算法来解决。除了贪心最优搜索之外&#xff0c;其他都是最优性算法&#xff0c;即得到的解都是最短路径。其中m是边的数量&#xff0c;n是点的数量。 问题边权算法时间复杂度一个起点&#xff0c;一个终点非负数&#…...

编程日记 2023/9/8 8:51:53

concrt140.dll怎么下载，concrt140.dll修复工具（修复精灵下载）一键修复问题

今天&#xff0c;我将为大家介绍一个非常常见的问题&#xff1a;由于找不到concrt140.dll,无法继续执行代码怎么办。这个问题可能会让很多网友感到头疼&#xff0c;但是别担心&#xff0c;我会为大家提供5种最全详细的恢复方法。在接下来我将详细介绍这些问题及其解决方法。希望…...

编程日记 2023/9/8 8:50:53

自行实现字符串转浮点数函数atof()

【重复造轮子的原因】 尽管atof是标准C中自带的函数，用于将字符串转为浮点数，但是在某些环境下有可能没法使用的（例如CUDA环境中，没有atof函数，但是math.h可以使用），因此自行实现。 【通过的测试用例】 【实现的代码】 #include <stdio.h> #include <math.h…...

编程日记 2023/9/8 8:49:51

Windows平台Fortran编程入门

Fortran&#xff0c;原意为 Formula Translation&#xff08;公式翻译器&#xff09;&#xff1b;一门出现很早的面向科学计算的高级语言&#xff0c;在数值计算领域仍然使用&#xff1b; 免费 Fortran 的编译器包括 GCC 的 GFortran&#xff0c;Intel 的 Intel Fortran Compi…...

编程日记 2023/9/8 8:48:50

srm供应商平台/seo关键词推广方式

以前在应用中使用到了Speex编解码&#xff0c;近来总结了一下Speex在android上的实现。Speex是一套主要针对语音的开源免费&#xff0c;无专利保护的音频压缩格式。Speex工程着力于通过提供一个可以替代高性能语音编解码来降低语音应用输入门槛 。另外&#xff0c;相对于其它编…...

编程日记 2025/2/7 8:05:35

淘宝做网站推广怎么样/头条号权重查询

Reflect对象与Proxy对象一样&#xff0c;也是 ES6 为了操作对象而提供的新 API Reflect设计目的&#xff1a; 将Object对象的一些明显属于语言内部的方法&#xff08;比如Object.defineProperty&#xff09;&#xff0c;放到Reflect对象上。修改某些Object方法的返回结果&#…...

编程日记 2025/2/7 5:16:12

网站建设收费价格/举例说明seo

#include “stdio.h” #include “math.h” int main() { int year, s,sum0, month[12] { 31,28,31,30,31,30,31,31,30,31,30,31 },i,j,flag0; printf(“请输入年、月、日&#xff0c;格式为&#xff1a;年 月 日&#xff08;2015 12 10&#xff09;”); scanf("%d%d%d&q…...

编程日记 2025/2/7 2:51:53

西安建网站/百度手机助手app下载

文章目录题目描述题解C语言C2. 两数相加题目描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设…...

编程日记 2025/2/7 2:18:38

建设银行客户端官方网站/正规seo排名外包

计算科学导论论文摘要&#xff1a;在计算科学与导论这门课程中&#xff0c;我们了解到了计算机科学是研制并且利用计算机完成数据处理任务的理论、方法和技术的学科。计算机的根本功能是数据处理。现代计算机体系在冯诺依曼模式上建立&#xff0c;包括硬件系统和软件系统两大部…...

编程日记 2025/2/7 0:28:43

wordpress 手机 菜单/营销型网站设计制作

Public Broadcasting Service (PBS) 希望构建一个智能推荐引擎&#xff08;SRE&#xff0c;Smart Recommendation Engine&#xff09;&#xff0c;使其能够根据多种因素向观众提供高质量的推荐内容。Public Broadcasting Service (PBS) &#xff1a;https://www.pbs.org/ 为了确…...

编程日记 2025/2/6 20:26:37