美文网首页
css position学习笔记

css position学习笔记

作者: 一笑倾城Tan | 来源:发表于2018-12-13 15:14 被阅读4次

一、position属性
static: 默认标准属性
relative: 相对属性
absolute: 绝对属性
fixed: 固定属性
inherit: 继承父类属性
二、position属性解析
static 设置或不设置都是按照标准流的形式排序
relative 相对它自己在标准流模式的位置来设置
top,left,right,bottom属性来移动
absolute 绝对布局,是相对于它在上一级父类的标准流模式的位置来设置 top,left,right,bottom来移动
fixed 固定属性,有点像口香糖一样就固定黏在一个位置,不受限制于它的上一级父类,直接受限制于body
inherit 子类设置了这个属性后就会集成父类的positon的属 性,父类的position是什么属性就是什么属性。

这里 我有点想不明白为啥不直接给子类设置和父类相同的positon属性就好了,干嘛还要继承呢?反正代码量都一样

欢迎关注我的微信公众号


扫码_搜索联合传播样式-微信标准绿版.png

相关文章

  • CSS 中 position 的 containing bloc

    这是 CSS-the complete guide 的学习笔记 Position: fixed 这种情况,cont...

  • css学习笔记(position)

    今天写这篇学习笔记主要是为了记录一下对我来说有一点容易混淆和容易遗忘的css知识点,position。 根据css...

  • css position学习笔记

    一、position属性static: 默认标准属性relative: 相对属性absolute:...

  • css学习笔记:定位position

    css position定位 position选值类型: static:默认状态,不开启定位 relative:相...

  • CSS-position-2

    CSS-position系列属性 CSS-position系列属性总结,写记下来,希望对大家有帮助,供新人学习,老...

  • 关于css

    在最近的学习中,对css position 理解不好,在网上找了找,觉得关于css position 看一下文章就...

  • [CSS学习笔记] 粘性固定 position:sticky

    在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sti...

  • 2017-12-30

    position:absolute and position:relative 的理解 Absolute,CSS中...

  • css粘性定位position: sticky

    css粘性定位position:sticky问题采坑position: sticky 详解(防坑指南)CSS中po...

  • CSS

    absolute position和relative position:https://css-tricks.co...

网友评论

      本文标题:css position学习笔记

      本文链接:https://www.haomeiwen.com/subject/oaqbhqtx.html