资讯专栏INFORMATION COLUMN

关于定位的总结

e10101 / 924人阅读

摘要:的几种取值默认默认值,,正常文档流。此时等无效相对于本来该在的位置进行移动,但是文档流还是原来的位置。相对于前一个非祖先元素进行定位,此时元素脱离了文档流。可以结合实现水平,垂直居中。

position的几种取值:static(默认),relative,absolute,fixed,sticky
static:
默认值,not positioned,正常文档流。此时top,right,left,bottom,z-index等无效
relative:
相对于本来该在的位置进行移动,但是文档流还是原来的位置。可以用其来实现居中。
absolute:
相对于前一个非static祖先元素进行定位,此时元素脱离了文档流。可以结合translate实现水平,垂直居中。
fixed:
相对于浏览器定位,此时文档脱离了文档流。

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

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

相关文章

  • 垂直居中相关知识总结

    摘要:垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前,在上提问了个问题关于垂直居中,大家有没有什么比较好的建议。 垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关的知识之前,在SF上提问了个问题CSS关于垂直居中,大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助,前辈们给的答案都非常多也各式各样,我觉得有必要把大家的回答总结一下。 方法总结 一、绝对定...

    Labradors 评论0 收藏0
  • 垂直居中相关知识总结

    摘要:垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前,在上提问了个问题关于垂直居中,大家有没有什么比较好的建议。 垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关的知识之前,在SF上提问了个问题CSS关于垂直居中,大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助,前辈们给的答案都非常多也各式各样,我觉得有必要把大家的回答总结一下。 方法总结 一、绝对定...

    GeekGhc 评论0 收藏0
  • CSS:关于元素宽度与高度讨论 系列文章(一)

    摘要:元素宽度为第一种情况元素为文档流中元素结论将上面结论中的例子元素宽度换为,表现与结论例子的表现一样,因此若元素为文档流中元素,则子元素宽度为父元素宽度的的。 约定:以下所讨论元素均为,display:block的非置换元素。关于什么是置换元素,什么是非置换元素元素,以及在w3c标准中定义的各种视觉化格式的框将在一篇博文中作出详细阐述。 1.元素不设宽度 第一种情况:元素为文档流中元素 ...

    izhuhaodev 评论0 收藏0
  • 关于css 垂直居中

    摘要:之前看了张大大的博客总结一下我对和的一些认知。站在巨人的肩膀上学习,再次谢谢张大大阮大大的各种分享。 对于元素的水平居中,我根据我自己之前的一些学习来进行一些总结,如果有不对的地方,欢迎指正~ 一、让大小不固定的元素垂直居中 因为:表格的单元格的特别属性:垂直居中等; `div.parent { display: table-cell; vertical-align...

    caspar 评论0 收藏0
  • 关于css 垂直居中

    摘要:之前看了张大大的博客总结一下我对和的一些认知。站在巨人的肩膀上学习,再次谢谢张大大阮大大的各种分享。 对于元素的水平居中,我根据我自己之前的一些学习来进行一些总结,如果有不对的地方,欢迎指正~ 一、让大小不固定的元素垂直居中 因为:表格的单元格的特别属性:垂直居中等; `div.parent { display: table-cell; vertical-align...

    icattlecoder 评论0 收藏0

发表评论

0条评论

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