前端~定位属性position(relative、absolute、fixed)的分析

简介: 前端~定位属性position(relative、absolute、fixed)的分析

前端~定位属性position(relative、absolute、fixed)的分析


 

1,简单了解:

relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute),作为定位的基准点(参照物)

absolute: 随参照物的变化而变化

fixed:固定

 

2,position 是否会被内部的子元素继承?

一般不能继承的属性,像盒模型,border、margin、padding等

但是,当子元素(或者时子组件)需要调整位置时,一定要~重新设置一下position的属性值

 

 

3,父级元素(position 是 relative)加入滚动条,子元素(position是 fixed)或 (position 是 absolute)的差异:

fixed:固定 ,位置不变,即使有滚动条,依然不变位置。

absolute:是参考父级元素的位置,父元素位置改变,它相应的改变。

 

4,属性值relative 和 absolute 的区别:

(1)是否脱离文档流: relative 不会脱离, absolute 会脱离

(2)对象可否层叠(就是对象原来的位置是否还被占据):

  □relative它是以自己本身所在位置进行偏移的,relative的对象被移出了原来的位置后,

  注意:他原来的位置还属于它的,别的元素不能替代它原来的位置.

  □absolute以最近一层relative的父级元素对象作为定位基准点,进行移动位置,

  当absolute对象移出了原来的位置,那么他原来的位置也就不存在了, 其他元素可以占领它的位置。

 

5,专业解释relative:

相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。

同样可以用z-index分层设计。

 

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
49 1
|
1月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
41 1
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
3月前
|
前端开发
前端基础(十三)_定位position、定位层级z-index
本文讲解了CSS中的定位机制,包括静态定位、相对定位、绝对定位和固定定位,并通过实例展示了如何使用这些定位方法调整元素位置。同时,还介绍了z-index属性的使用,解释了如何通过调整z-index值来改变定位元素的层叠顺序。
45 6
前端基础(十三)_定位position、定位层级z-index
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
69 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
82 1
|
3月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
52 0
前端基础(十)_Dom自定义属性(带案例)
|
2月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
822 0
|
3月前
|
前端开发