CSS--定位相关知识

定位：
1.静态定位 position : static
2.相对定位 position : relative
特性：不脱离文档流原先位置保留相对于自身在浏览器的位置进行定位
3.绝对定位：postion:absolute
特性：
1.脱离文档流原先位置不保留飘在文档流上方
2.无论有没有父元素/祖先元素，相对浏览器视口区域进行定位
3.如果父元素/祖先元素设置了定位，相对于父元素/祖先元素，相对浏览器视口区域进行定位
4.固定定位：
特性：
1.脱离文档流
2.相对于浏览器视窗口进行定位
5.粘滞定位：position:sticky
相对定位加固定定位
特性：不脱离文档流没有达到阈值前是相对定位达到阈值后是固定定位
6.z-index 元素的堆叠顺序 z-index 默认值是0 针对定位流而言的

相对定位代码展示模块：

<!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>div {width: 100px;height: 100px;}.div1 {background-color: yellow;}.div2 {background-color: red;/* 先对定位  position: relative文档流不脱离 参照点特性： 不脱离文档流 原先位置保留 相对于自身在浏览器得默认位置进行定位*/position: relative;/* 配合属性 top bottom left right 同一方向得属性只能写一个 */top: 40px;left: 40px;}.div3 {background-color: blue;}</style>
</head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div>
</body></html>

绝对定位代码模块展示：

<!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>.parent {position: absolute;background-color: orange;}div {width: 100px;height: 100px;}.div1 {background-color: red;}.div2 {background-color: blue;/* 绝对定位 position: absoulute 特性：1.脱离文档流 原先位置不保留 飘在文档流得上方2.无论有没有父元素/祖先元素 始终是相对于浏览器的视口区域进行定位的3.如果父元素/祖先元素设置定为定位流，就相对于父元素/祖先元素*/position: absolute;top: 40px;left: 50px;width: 50px;height: 50px;}.div3 {background-color: pink;}</style>
</head><body><div class="div1"></div><div class="parent"><div class="div2"></div></div><div class="div3"></div>
</body></html>

固定定位代码模块展示：

<!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>.fixBox {width: 100px;height: 100px;background-color: yellow;/* 固定定位 position: fixed 特性;1.脱离文档流 原先位置不保留 飘在文档流上方，2.相对于浏览器视口进行定位*/position: fixed;right: 0;bottom: 50px;}.div2 {width: 100px;height: 100px;background-color: blue;}</style>
</head><body><!-- 可以跟a配合回到顶端 --><div class="fixBox"><a href="#">回到顶端</a></div><div class="div2"></div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div><div>我是一个</div>
</body></html>

粘滞定位代码模块解析

<!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>Document</title><style>.container{width: 1200px;/* 水平居中 */margin: 0 auto;}.container>div{width: 1200px;height: 700px;}.container>div:nth-child(odd){background-color: #fff;}.container>div:nth-child(even){background-color: yellow;}.container>.left,.container>.right{width: 150px;height: 500px;background-color: red;}.container>.left{/* 粘滞定位relative + fixed距离上方50px之前是相对定位 到达50px之后成为固定定位 */position: sticky;top: 50px;}.container>.right{float: right;position: sticky;top: 50px;}</style>
</head>
<body><div class="container"><div></div><div></div><aside class="right"></aside><aside class="left"></aside><div></div><div></div><div></div><div></div><div></div></div>
</body>
</html>

兄弟级元素使用z-index 代码模块解析：

<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>z-index</title><style>div {width: 100px;height: 100px;}.div1 {position: relative;background-color: yellow;z-index: 50;}.div2 {position: relative;background-color: red;margin-left: 50px;margin-top: -50px;z-index: 100;}</style>
</head><body><!-- 兄弟元素同时定位方案兄弟元素堆叠顺序 谁的z-index高 谁的优先级高--><div class="div1"></div><div class="div2"></div>
</body></html>

父子级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>Document</title><style>/* 父子元素开启定位流1.只给父元素设置z-index ,不给子元素设置，无论父元素z-index值多大，子元素优先级更高2.如果只给子元素设置z-index,不给父元素设置:z-index >= 0 优先级高于父元素 z-index < 0 优先级低于父元素3.两个元素同时设置z-index:无论子元素的z-index多低,父元素z-index多高 子元素的优先级永远高于父元素*/.parent {position: relative;width: 200px;height: 200px;background-color: cyan;z-index: 10;}.child {position: relative;width: 100px;height: 100px;background-color: coral;z-index: -1;}</style>
</head><body>

CSS--定位相关知识相关推荐

（1）初识人员定位：对人员定位相关知识的自己的理解
注:本文中所说的人员定位一般针对煤矿等室内场所. 对于人员定位的研究越来越成熟,所用到的定位技术和定位算法也是层出不穷,令人眼花缭乱,什么UWB,ZigBee,TOA,TDOA--等等各种英文缩写名词 ...
CSS布局相关知识（四）：定位（相对、绝对、固定、粘滞）、层级
一.定位 position 定位是什么: 定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置怎么设置定位: 使用position属性来设置定位,可选值: static 默认值,元素 ...
重定位相关知识，为什么要重定位
在NT环境下隐藏进程,也就是说在用户不知情的条件下,执行自己的代码的方法有很多种,比如说使用注册表插入DLL,使用Windows挂钩等等.其中比较有代表性的是Jeffrey Richer在<Wi ...
css定位相关知识点
定位:是一种布局手段,而且它是一种高级的布局手段,可以将页面中的任何元素放在页面中的任意位置通过position属性进行设置, 可选值: static 默认值不开启定位以下 ...
java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...
【定位】无线电测向相关知识（1）
无线电测向相关知识(1) 发射传输接收定位相关载波调制(模拟信号) 目的: 分类: 比较雷达和声纳关于无线电测向比赛参考 2021年5月8日无线电的整个过程分为:发射.传播.接收三个大 ...
光斑定位技术在空间激光通信中扮演着重要的角色。本文将详细介绍光斑定位的相关知识，并使用Matlab实现一些相关的算法。
光斑定位技术在空间激光通信中扮演着重要的角色.本文将详细介绍光斑定位的相关知识,并使用Matlab实现一些相关的算法. 一.光斑定位技术光斑定位技术是一种通过计算像素位置来确定目标物体位置的技术,广 ...
Web前端技术分享：CSS菜单图标相关知识
CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是Web前端人才必须要掌握的基础技能之一.想要学习Web前端,最开始的基础学习一定是CSS.接下来我就给大家简单分享CSS菜单图标相关知识 ...
css位置布局,CSS定位布局相关
本文档包括CSS的样式定位框模型如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...
Web前端知识CSS（CSS定位、CSS透明、阴影、边框圆角）
一.CSS 定位定位的作用普通文档流中块元素垂直排列,行内元素水平排列. 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某 ...

CSS--定位相关知识

CSS--定位相关知识相关推荐

最新文章

热门文章