CSS学习20:absolute(绝对定位)「建议收藏」

CSS学习20:absolute(绝对定位)「建议收藏」绝对定位的介绍: 绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。 语法: 选择器{position:absolute;}1、完全脱标——完全不占位置;2、父元素没有定位,则以浏览器为准定位(Document文档)。3、父元素要有定位i.元素将依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。ii.绝对定位的特点总结:(务必记住)…

大家好,欢迎来到IT知识分享网。

绝对定位的介绍:

  • 绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。

  • 语法:

选择器 { 

     position: absolute; 

 }

1、完全脱标 —— 完全不占位置;

2、父元素没有定位,则以浏览器为准定位(Document 文档)。

CSS学习20:absolute(绝对定位)「建议收藏」

  3、父元素要有定位

        i.元素将依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。  

CSS学习20:absolute(绝对定位)「建议收藏」 

 

        ii.绝对定位的特点总结:(务必记住)

 

1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为基准定位(Document 文档)。

2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。(脱标)

定位口诀 —— 子绝父相

子级是绝对定位的话,父级要用相对定位。

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/26635.html

(0)
上一篇 2023-04-23 22:00
下一篇 2023-04-25 16:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信