学习笔记-CSS定位

最新推荐文章于 2025-04-26 16:52:08 发布

原创最新推荐文章于 2025-04-26 16:52:08 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

html css js 专栏收录该内容

37 篇文章

订阅专栏

本文详细解析了CSS中absolute和relative定位的区别及用法。absolute定位相对于最近的已定位父元素，若无则相对于初始包含块。relative定位相对于元素自身的位置进行偏移，不影响其他元素布局。

absolute是相对于自己最近的父元素来定位的，relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素..

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大狗狗

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

学习HTML-CSS-JavaScriptNotes：学习html CSS JavaScript笔记

02-20

2. **CSS选择器**：理解ID选择器、类选择器、标签选择器等，并学会组合使用以精确定位元素。 3. **盒模型**：了解CSS的盒模型，包括内容、内边距、边框和外边距，掌握布局技巧。 4. **CSS布局**：掌握流体布局、...

html-css-learning：HTML + CSS学习笔记

03-03

在这个“html-css-learning”学习笔记中，我们将深入探讨这两个领域的关键概念和实践技巧。 1. **HTML基础知识** - **标签与元素**：HTML由一系列标签组成，每个标签都有其特定含义。例如，`<html>`是文档的根元素...

参与评论您还未登录，请先登录后发表或查看评论

前端学习笔记--CSS

m0_73856804的博客

03-24

1749

Cascading Style Sheet 层叠级联样式表CSS:表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。浮动是增加了层级，是浮在父级元素上的。所以可能会导致父级元素边框塌陷。

前端学习笔记-CSS

GRIT0716的博客

11-25

1021

一些自己学习过程中总结的最基础的css知识点的简要概括，主要用来当我的笔记。

CSS 定位学习笔记

最新发布

Rey_family的博客

04-26

805

CSS 定位是控制 HTML 元素在页面中位置的核心技术，允许元素脱离正常文档流，实现复杂布局效果。CSS定位是构建现代网页布局的基石，掌握四种定位方式的特性和适用场景，配合偏移属性和z-index，可以创建出各种复杂的布局效果。关键是要理解每种定位的参考系和文档流影响，在实践中灵活运用。

【前端学习笔记02-CSS 自用】

Webrin的博客

11-03

2052

CSS 的全称为：层叠样式表 ( Cascading Style Sheets )。实现了结构与样式的分离。

HTML入门学习笔记--CSS定位(8)

qq_孤小狼的博客

01-16

801

75-定位流1.定位流分类1.1相对定位 1.2绝对定位 1.3固定定位 1.4静态定位2.什么是相对定位?相对定位就是相对于自己以前在标准流中的位置来移动3.相对定位注意点3.1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间 3.2在相对定位中同一个方向上的定位属性只能使用一个 3.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

学习笔记11----css定位以及元素的显示与隐藏

新手初学期

02-28

150

学习笔记11

css-day07笔记-CSS定位position

xhqxhq_的博客

04-14

659

typora-copy-images-to: media 第01阶段.WEB基础：css-day07笔记-CSS定位position 一、定位(position) 学习目标理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局 1. CSS 布局的三种机制网页布局的核心 —— 就是用 CS...

CSS 学习笔记 - 定位

灵台方寸山斜月三星洞

09-03

389

CSS 学习笔记 - 定位position定位类型清除浮动父元素自动高度参考资料 position定位类型清除浮动父元素自动高度子元素浮动后，父元素自动撑起高度的各种方法：通过在子元素末尾加一个不可见的子元素，将其清除浮动，实现撑高父元素。通过伪类实现末尾添加一个元素。触发BFC比如 overflow : hidden 参考资料 MDN：CSS_定位_Positioning ...

CSS学习笔记-06-定位

weixin_53249168的博客

12-03

332

简单的介绍CSS的四种定位，当元素的position属性值设置为relative时则开启了元素的相对定位，元素开启相对定位后，如果不设置偏移量元素不会发生任何的变化，相对定位是参照于元素在文档流中的位置进行定位的，相对定位会提升元素的层级，相对定位不会使元素脱离文档流，相对定位不会改变元素的性质快还是块，行内还是行内

精选资源

前端学习之路-css笔记.docx

07-17

综上所述，CSS是前端开发中的基石，掌握其基本语法、选择器和字体属性只是入门，真正的高手还需要不断深入学习，理解盒模型、定位、响应式设计、动画和过渡等高级特性，以实现更复杂的网页布局和交互效果。

20190801-css相对定位.txt

08-03

css 相对定位设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状，它原本所占的空间仍保留。 css相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在她所在的...

JS"类"中方法的互相调用

Win32FanEx 的专栏

03-02

5614

JS"类"中的方法相互调用要加"this"，不然无法成功： New Document function A() { this.f = function() { alert("f"); } this.f2 = function() { //f(); 不加this调用失败 this.

消除canvas闪烁

Win32FanEx 的专栏

08-26

4042

canvas的闪烁主要和平台有关，如何去避免需要慢慢积累经验。 1. clearRect造成闪烁使用clearRect清空局部区域后重绘能会造成闪烁。PC上问题不大，移动端比较明显。（注clearRect(0,0,canvas.width,canvas.height)也会闪烁，除非是clearRect(0,0,canvas.width+1,canvas.height+1)）。原因：可能是canvas抗锯齿的动作导致。关于该问题的分析见：https://stackoverflow.com/que

关于table中使用了colspan后导致列宽度失效问题

Win32FanEx 的专栏

12-16

3680

因为一般表格都会定义一个table-layout: fixed;防止td被连串字符撑开，但是如果首行有合并单元格的话 TD宽度定义就会失效。最好的办法，在最上边加以下代码来控制td宽度 <colgroup> <col width=60%></col> <col width=20%></col> ...

js splice方法的返回值

Win32FanEx 的专栏

01-17

3458

参考：http://www.w3school.com.cn/jsref/jsref_splice.asp 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 var a = [1,2,3]; a= a.splice(2,1);//这样写就错了 a.splice(2,1);//正确...

JS文件中变量命名防止重复

Win32FanEx 的专栏

08-29

3386

今天遇到一个奇怪现像：一段JS脚本在IE中执行正常，在chrome中却执行失败。最后发现问题出在： var top=...; top在chrome中已经被定义了，就像document和window一样。所以我们在写js代码时，不可以再用top做变量名。为了避免变量名重复，给变量名加个独特的前缀或后缀比较保险。