资讯专栏INFORMATION COLUMN

【学习笔记】CSS深入理解之relative

nanfeiyan / 2305人阅读

摘要:张鑫旭的深入理解之对绝对定位元素的限制限制定位限制层次限制,原本对绝对定位元素无效,容器设置的情况下生效的定位特性相对于自身无侵入,不会对其他元素的布局产生影响与与同时存在时,忽视的层叠特性可以提高层叠上下文为具体数值时,限制内部绝对定位

张鑫旭的CSS深入理解之relative
relative对绝对定位元素的限制

限制定位

限制层次

限制overflow,overflow原本对绝对定位元素无效,容器设置relative+overflow的情况下生效

relative的定位特性

相对于自身

无侵入,不会对其他元素的布局产生影响

top与bottom、left与right同时存在时,忽视bottom、right

relative的层叠特性

可以提高层叠上下文

z-index为具体数值时,限制内部绝对定位元素层叠

z-index为auto时,不限制内部绝对定位元素层叠

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117043.html

相关文章

  • 学习笔记CSS深入理解z-index

    摘要:张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级,离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。 张鑫旭的CSS深入理解之z-index学习笔记 层叠上下文 什么是层叠上下文?在z轴上延伸出一个层级,离父级层叠上下文的顶部更近。 如何产生层叠上下文? 根元素具有根层叠上下文 z-index不为auto的定位元素 一个 z-index 值不为 ...

    Steven 评论0 收藏0
  • 学习笔记CSS深入理解absolute

    摘要:张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似,都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性,使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应,可应用于大范围的布局。 《张鑫旭的CSS深入理解之absolute》学习笔记 绝对定位的特性 绝对定位与浮动相似,都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代 绝对定位的行为表现 无依赖绝对...

    Anleb 评论0 收藏0
  • 学习笔记CSS深入理解float

    摘要:为了实现文字环绕效果,规范规定的措施是使父容器塌陷,元素脱离文档流浮动,元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看,浮动不适合用于大范围的布局,更适合利用其特性实现一些小范围的流体布局效果。 张鑫旭的CSS深入理解之float浮动学习笔记 float的历史 float为产生文字环绕效果而生 float的特性 — 包裹和破坏 包裹:即产生一个BFC破坏:使父容器...

    denson 评论0 收藏0
  • 学习笔记CSS深入理解margin

    摘要:张鑫旭的深入理解之学习笔记与容器的尺寸可视尺寸对于没有设定的块元素,可改变元素水平方向的可视尺寸占据尺寸对于元素,可改变元素水平垂直方向的占据尺寸与百分比单位普通元素的百分比都是相对于容器的宽度计算的绝对定位元素的百分比是相对于包含块的宽 张鑫旭的CSS深入理解之margin学习笔记 margin与容器的尺寸 可视尺寸:对于没有设定width的块元素,margin可改变元素水平方向...

    stefan 评论0 收藏0
  • 学习笔记CSS深入理解padding

    摘要:张鑫旭的深入理解之学习笔记与容器的尺寸元素值过大,一定影响元素尺寸为定值,会影响元素尺寸为或者为,同时值没有暴走,不影响元素尺寸元素水平影响尺寸,垂直不影响尺寸,但是会影响占据空间会显示背景色负值与百分比单位不支持负值百分比相对于自身宽 张鑫旭的CSS深入理解之padding学习笔记 padding与容器的尺寸 block元素 padding值过大,一定影响元素尺寸 width为定...

    learn_shifeng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<