CSS定位—子绝父相

最新推荐文章于 2025-04-05 22:19:37 发布

成为照亮自己的光

最新推荐文章于 2025-04-05 22:19:37 发布

阅读量526

点赞数

文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/qq_43247538/article/details/125702520

版权

“子绝父相”是学习定位的口诀，这句话的意思是:子级是绝对定位的话，父级用相对定位。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结:因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

成为照亮自己的光

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块

念兮为美

07-31

6182

我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...

css定位-子绝父相

qq_43733682的博客

03-01

6209

题目要求：开始的代码： <!DOCTYPE html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="./index.css" /> <title>优课达</title> </head> <body> <h1 class="title">MOUNTAIN</h1>

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

css定位(子绝父相)

m0_50125215的博客

03-23

2283

定位 ☆定位核心 —— 子绝父相 1.1 在开发中什么时候需要使用定位？定位就是解决标准流和浮动无法实现的效果。 1.2 「定位组成」定位 = 定位模式 + 边偏移定位模式：用于指定元素的定位方式，通过 position 属性设置边偏移：根据定位模式确定最终位置，通过 top、bottom、left、right 四个属性设 1.3 定位模式序号值语义 1 static 静态定位 2 relative ☆ 相对定位 3 absolute ☆ 绝对定位 4 fix

CSS定位

最新发布

xrkhy的博客

04-05

1078

学习css定位

css基础知识学习

AYUKiss的博客

05-19

732

CSS 字体属性字体系列 font-family 属性定义文本的字体系列。 p { font-family:"微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";} //使用多个字体时，如果第一个字体浏览器没有，就显示第二个字体大小 p { font-size: 20px; }  px（像素）大小是我们网页的最常用的单位  谷歌浏览器默认的文字大小为16px  不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要

css定位position：子绝父相

qq_60839348的博客

11-17

825

css定位position：子绝父相

子绝父相(子元素设置绝对定位，父元素设置相对定位)

yellow_important的博客

07-20

1132

"子绝父相"是CSS定位中的一种常见布局方式，这个概念主要涉及父元素和子元素的定位方式。具体而言，子元素使用绝对定位（position: absolute），而父元素使用相对定位（position: relative）。这样设置后，子元素的位置是相对于父元素来计算的，而不是相对于文档的根元素。这种布局方式的好处在于，它允许子元素在父元素内部进行精确的定位，而不受外部其他元素的影响。父元素被设置为相对定位，而子元素被设置为绝对定位，并且位于父元素的右下角。

详解CSS 子元素相对于父元素固定定位解决方案

11-19

在CSS布局中，子元素相对于父元素的固定定位是一个常见的需求，这主要涉及到CSS的定位机制，包括绝对定位和相对定位。本篇文章将详细解析如何实现这个目标。首先，我们来回顾一下绝对定位（absolute）和相对定位...

CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）

小琳爱分享的博客

07-23

962

CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）

css子元素相对父元素进行定位的实现

11-19

本文将详细介绍如何通过设置CSS样式来实现子元素相对于父元素的精确定位。 #### HTML结构 HTML部分非常简单，主要包括一个父容器`<div id="div1">`和一个子容器`<div id="div2">`： ```html <div id="div2"></...

CSS定位子绝父相

weixin_46069079的博客

03-19

176

子绝父相

CSS布局-定位，相对，绝对，子绝父相，固定定位，层级关系。

weixin_48370579的博客

12-11

2509

CSS布局-定位，相对，绝对，子绝父相。目录CSS布局-定位，相对，绝对，子绝父相。1、定位1.1 网页常见布局方式1.2 定位的常见应用场景2.1 定位初体验2.2 使用定位的步骤3.1 静态定位4.1 相对定位5.1 绝对定位5.2 绝对定位到底相对于谁进行偏重点6.1 子绝父相介绍7.1 固定定位8.1 元素层级问题8.2 更改定位元素的层级重点学习目标 ◆ 能够说出定位的常见应用场...

CSS中的子绝父相布局

Inory_ye的博客

12-23

3443

前言一、

CSS布局之定位详解（相对定位、绝对定位、子绝父相、固定定位）

Esther_liew的博客

05-26

2676

CSS布局--定位详解（相对定位、绝对定位、子绝父相、固定定位）

css样式基础子绝父相

m0_65069237的博客

07-29

599

在写前端页面的过程中我们难免会遇到一个div标签里面套用多个div标签，或者一个div标签里面有图片标签img和div标签，然后想把div中的文字移动到img图片标签的下面的位置这些等，总而言之就是在div中，将他内部所有的标签按照一些标准放到固定位置比如：1、这是没有使用子绝父相的页面：可以看出由于div是块级标签，所以一个div独占一行，三个div就父元素米白色中占据了三行2、使用子绝父相这个公式后：可以发现：米白色父级元素的选择器.head-box加入了。

CSS之定位position(子绝父相）

weixin_50119334的博客

09-20

2438

CSS之定位定位与浮动的区别：浮动：可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子定位：可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子定位的组成定位=定位模式+边偏移定位模式 position 选择器 {position : 属性值；} position有四个属性值： 1.**static：静态定位，**没有特殊的定位规则，遵循正常的文档流对象（极少使用） 2 .relative：相对定位，相对于元素自身进行定位（参照物为元素原来的位置） //

定位（子绝父相）

qq_50260510的博客

03-12

3534

（1）块级元素独占一行 → 垂直布局（2）行内元素/行内块元素一行显示多个 → 水平布局可以让原本垂直布局的块级元素变成水平布局（1）可以让元素自由的摆放在网页的任意位置（2）一般用于盒子之间的层叠情况4.定位的常见应用场景（1）解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上（2）可以让盒子始终固定在屏幕中的某个位置1.属性名：position2.常见属性值：（1）静态定位：static（2）相对定位：relative（3）绝对定位：absolute。

css中子绝父相

老简单题

02-07

2011

子绝父相：绝指的是绝对定位，即css中的position: absolute；相是指css中的position: relative。子绝父相能够使子节点按照父节点的标准进行绝对定位例如：父盒子添加margin-left后，子节点也会跟着父节点的位置相对移动，因为子节点在父节点中的位置是相对固定的。 ...

css简述子绝父相原则

05-17

CSS中的子绝父相原则指的是当子元素使用绝对定位时，其父元素应该使用相对定位来作为参照物。具体来说，子元素通过设置position: absolute来使自己脱离文档流，可以自由地定位在父元素的任何位置。而父元素使用...