JAVASCRIPT---css定位布局（建议收藏）

已于 2022-09-01 19:44:31 修改
阅读量210 收藏
点赞数
文章标签： css 前端 html
于 2022-09-01 17:18:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20006765/article/details/126647608
版权

目录

定位布局

- 1.1.静态定位（ Static positioning）

- 1.2.什么是相对定位?（ Relative positioning ）

- 1.3.什么是绝对定位?（Absolute positioning）

- 1.4.固定定位（Fixed positioning）

- 1.5.粘滞定位（ Sticky positioning ）

- 1.6.z-index

- 1.1.静态定位（ Static positioning）

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

position: static;

- 1.2.什么是相对定位?（ Relative positioning ）

相对定位就是相对于自己以前在标准流中的位置来移动 ​ position: relative; ​ 使用top,right,bottom,left来控制

- 相对定位注意点

  • 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

  • 在相对定位中同一个方向上的定位属性只能使用一个

  • 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

  • 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局

- 相对定位应用场景

  • 用于对元素进行微调

  • 配合后面学习的绝对定位来使用

- 1.3.什么是绝对定位?（Absolute positioning）

绝对定位就是相对于body来定位 ​ position: absolute;

- 绝对定位参考点

1.规律 ​ 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。 ​ 2.1只要是这个绝对定位元素的祖先元素都可以 ​ 2.2指的定位流是指绝对定位/相对定位/固定定位 ​ 2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

-绝对定位注意点

1.绝对定位的元素是脱离标准流的 ​ 2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素 ​ 3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点 ​ 4.一个绝对定位的元素会忽略祖先元素的padding

- 绝对定位-子绝父相

相对定位弊端: ​ 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面 ​ 绝对定位弊端: ​ 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化 ​ 子绝父相 ​ 子元素用绝对定位, 父元素用相对定位

-绝对定位水平居中

只需要设置绝对定位元素的left:50%; ​ 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

- 1.4.固定定位（Fixed positioning）

1.什么是固定定位? ​ position: fixed; ​ 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定 定位可以让某个盒子不随着滚动条的滚动而滚动。

注意点: ​ 1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间 2.固定定位和绝对定位一样不区分行内/块级/行内块级

- 1.5.粘滞定位（ Sticky positioning ）

position: sticky;

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上

移动（此时相当于fixed定位）。

设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：

父元素不能overflow:hidden或者overflow:auto属性。

必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

- 1.6.z-index

1.什么是z-index属性? ​ 默认情况下所有的元素都有一个默认的z-index属性, 取值是0. ​ z-index属性的作用是专门用于控制定位流元素的覆盖关系的

2.默认情况下定位流的元素会盖住标准流的元素 ​ 3.默认情况下定位流的元素后面编写的会盖住前面编写的 ​ 4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面 ​ 注意点: ​ 1.从父现象 ​ 1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上 面。 ​ 1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说 谁的父元素的z-index属性比较大谁就会显示在上面。

hdxx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js使用css元素定位_如何使用新CSS“：is（）”轻松进行元素定位
Web design 教程小屋
07-09 868
新CSS :is()伪类正逐渐成为一种以元素为目标的好方法，它可以节省代码行，并保持CSS的可读性。 这是:matches()和:any()进化的下一阶段，添加了一些额外的功能并提高了选择器背后语言的语义和直观性。 在这个快速提示中，我们将熟悉它。 让我们首先来看一下如何在应用程序中使用此伪类（在规范中正式称为“ matches-any”）。 然后，我们将讨论如何替换:matches()和...
CSS布局之定位布局
gfhdgo的博客
08-16 159
一、静态定位（ Static positioning） 是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。 position: static; 二、相对定位（ Relative positioning ） 相对定位就是相对于自己以前在标准流中的位置来移动 ​ position: relative; ​ 使top,right,bottom,left来控制。单独使用相对定位很少，大部分都是和绝对定位一起使用，形成子绝父相。 注意点： 相对定位是不脱离标准流的,...
3)js的基础语法使用以及css定位
weixin_33962621的博客
07-12 136
Css 定位：background-position: 20px 40px; （1）相对定位：如果仅仅对当前盒子设置相对定位，那么他与原来的盒子没有任何变化只有一个作用： 父相子绝，不适用相对定位来做压盖现象不脱标、形影分离、老家留坑（2）绝对定位：设置绝对定位的盒子，脱离标准流（3）固定定位1）：相对定位：<!DOCTYPE html...
JavaScript+Css标签元素定位；在left:50%；top:50%；transform:translate(-50%,-50%)；居中的情况下，使该元素具有移动功能。
Script_ssq的博客
11-04 591
JavaScript+Css标签元素定位；在left:50%;top:50%;transform:translate(-50%,-50%);居中的情况下，使该元素具有移动功能。项目中遇到的，记录一下。
简单说一下html,css,javascript在网页开发中的定位?
sinat_41920065的博客
07-10 1277
HTML 超文本标记语言 定义网页的结构 CSS 层叠样式表，用来美化页面 JavaScript主要用来验证表单，做动态交互(其中ajax)
QuizApp-Javascript-HTML_CSS
03-13
在QuizApp-Javascript-HTML_CSS项目中，CSS文件可能定义了各种样式规则，如字体、颜色、布局、动画效果等，以实现美观的界面设计。开发者可能使用选择器（如类选择器、ID选择器）来定位HTML元素并应用样式。CSS布局...
layout-demo：CSS的各种布局
02-04
在IT领域，尤其是在网页设计和开发中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页元素的样式、布局和结构。本压缩包文件"layout-demo"聚焦于CSS的各种布局技术，包括传统的布局方式以及现代...
下拉菜单实用程序-使用Javascript，CSS和DOM
04-01
同时，利用CSS的定位属性（如position: absolute或position: fixed），我们可以精确控制下拉菜单在页面上的位置。通过CSS3的过渡和动画效果，可以让菜单的展开和收起更平滑自然，提升用户体验。 DOM是HTML和XML文档...
modal-window-using-javascript-and-css
03-31
总的来说，创建一个使用JavaScript和CSS的模态窗口需要理解网页布局、CSS样式、JavaScript事件处理以及DOM操作等基础知识。这个项目提供了一个学习和实践这些技能的机会。通过深入研究项目的代码和文档，开发者可以...
css-layout-positioning-08:CSS 定位
07-20
CSS 定位 目标 在课程结束时，学生应该能够： 使用边距和填充在元素内部和外部建立间距。 解释网页中不同类型的距离测量之间的区别，包括'px'、'%'和'em'。 使用 'float' 和 'clear' 将元素并排堆叠。 解释...
JavaScript Web APIs2，CSS的三种定位
m0_61489049的博客
09-09 66
获取属性值 element.属性 获取属性值。 element.getAttribute(‘属性’); 区别： element.属性 获取内置属性值（元素本身自带的属性） element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性 设置属性值 element.属性 = ‘值’ 设置内置属性值。 element.setAttribute(‘属性’, ‘值’); 区别： element.属性 设置内置属性值 element.setAttribute(‘属性’)
js+css 灵活层叠 绝对/相对 定位
a8263664的博客
04-25 719
测试    .tempDrawDiv{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}  .retc{position:absolute; border:1px solid #CCCCCC; overflow:hidden; ba
使用CSS选择器定位页面元素
DefectFinder的博客
06-22 4144
之前总结了使用ID，Name，Xpath等方式来定位页面元素，其实CSS选择器也是一个非常好用的定位元素的方法，甚至比Xpath强大。在自动化里我们用CSS选择器来定位页面元素一定要牢记一个准则：唯一定位，通常使用CSS选择器修改样式时会尽量多的选择元素，但是，在自动化里，必须要唯一定位到元素，否则自动化很可能因为找不到页面元素而失败。CSS选择器有很多，像标签选择器、类选择器、ID选择器、关系选
CSS 布局 - position 属性
m0_67014537的博客
07-10 273
position属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute）。position 属性规定应用于元素的定位方法的类型。有五个不同的位置值：元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 rig
Div绝对定位js代码
z_vv11的专栏
06-20 904
function showDiv(name) { var cf=document.getElementById("DivID"); var oImg=document.getElementById(name); var eT=0,eL=0,p=oImg; var sT=document.body.scrollTop,sL=document
css、js
最新发布
weixin_63407059的博客
11-21 199
2.相对定位，position：relative，参照原本的位置进行移动，通过top、bottom、left、right进行定。1.静态定位，默认为静态定位，position：static，无法通过top、bottom、left、right进行定位。4.固定定位，position：fixed，参照浏览器进行移动，通过top、bottom、left、right进行定位。3.绝对定位，position：absolute，参照有定位属性的父级标签，如果没有，则参照body，通过。
【Web-CSS基础】CSS的三大特性、定位方式、静态定位、相对定位、绝对定位、浮动定位、固定定位、设置缩放动画
居然天上楼的博客
11-02 1150
CSS的三大特性、定位方式、静态定位、相对定位、绝对定位、浮动定位、固定定位。
前端css 属性
qq_18246731的博客
08-14 798
目录 一、字体属性 字体种类(font-family) 字体大小(font-size) 字重(字体粗细)(font-weight) 文本颜色(color) 文字对齐(text-align) 文字装饰(text-decoration ) 首行缩进(text-indent) 二、背景属性 背景颜色(background-color) 背景图片(background-imag...
关于sticky和z-index的几个小坑
weixin_52447755的博客
09-09 713
position：sticky 首先说说注意点 position:sticky; 设置top或left等定位 注意一般是给外层容器设置，当然也可以根据需求调整 神坑 某次我给设置了sticky的节点的兄弟节点设置了max-height，但是实际高度是大于最大高度的，这就会有划到一定高度后设置了sticky的节点不见了，所以要注意高度不能大于最大高度 z-index假失效 要注意设置z-index的节点背景色是不是透明的，不然真的要找很久bug，设置下背景色就好了
CSS定位与z-index详解
"CSS相关技术文档，包括定位属性和z-index的详解，以及相关的Web开发案例" CSS（层叠样式表）是用于控制网页元素样式...通过理解并熟练运用这些CSS定位和z-index的知识，开发者能够创建更复杂、更具交互性的网页布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值