美文网首页
绝对定位理解

绝对定位理解

作者: shoage | 来源:发表于2019-02-15 11:27 被阅读1次

1.绝对定位不区分块级/行内/行内块级,统一视为块级元素,可设置宽高,宽度默认为内容的宽度

2.绝对定位默认情况下,元素位置在正常文档流中的位置,但脱离了文档流,不占据文档流的位置

3.元素如果存在宽度left和right只能设置一个,都设置的话只有left起作用,元素如果存在高度同理top和bottom也只有一个起作用,都设置只有top起作用,但是如果没有显示的设置width和height,则可以通过left、right、top以及bottom来计算出width和height

4.默认情况下,无论绝对定位元素有没有祖先元素,都以body为参考点,此时是以网页首屏(body很大的话可以理解为第一页,不论水平方向还是垂直方向)尺寸为参考点

5.如果一个绝对定位元素有祖先元素,且祖先元素也是定位流(相对定位、绝对定位、固定定位),这里静态定位(静态定位其实就是元素的默认定位方式即不设置postion属性时)除外,那么该元素的会以这个祖先元素作为参考点,如果存在多个祖先元素都是定位流情况,按照就近原则,最近的祖先元素为参考点

6.绝对定位元素会忽略祖先元素的padding属性

7.绝对定位元素水平居中,只要设置left为50%,margin-left为负宽度的一半即可

相关文章

  • 绝对定位理解

    1.绝对定位不区分块级/行内/行内块级,统一视为块级元素,可设置宽高,宽度默认为内容的宽度 2.绝对定位默认情况下...

  • 前端开发 --相对定位和绝对定位理解

    一直很模糊绝对定位和相对定位,今天写个demo观察变化理解下: 绝对定位 基于绝对定位的元素不会占据空间,脱离文档...

  • CSS 相对定位,绝对定位理解

    1.相对定位 position:relative; 效果如图: 当使用margin: 80px 0 0 80px时...

  • CSS中相对定位和绝对定位理解

    CSS布局在整个前端开发中占据了大约50-70%的工作量,在遵循web规范的前提下,编写合乎规范的前端代码,实现结...

  • CSS相对定位与绝对定位的理解

    最近在学习H5的内容,基本上都是快速向前推进,大致把基础的部分都看完了。在CSS这一块儿,我觉得初学者最迷茫的就是...

  • 2018-10-22-SVG复杂路径的绘制

    A/a 椭圆圆弧 (个人理解,使用相对定位更多一些,绝对定位对于定位精确点来说不太容易实现) 公司的logo中包含...

  • day06

    1定位 相对定位relation 绝对定位absolute 相对定位就是元素在页面上的正常位置 2绝对定位 绝对定...

  • CSS定位

    绝对定位 相对父级标签绝对定位

  • 20.css 绝对定位

    当position设置为absolute时,则开启绝对定位 绝对定位: 开启绝对定位,会使元素脱离文档流 开启绝对...

  • 定位流-绝对定位

    1.什么是绝对定位?绝对定位就是相对于body来定位 2.绝对定位注意点2.1绝对定位的元素是脱离标准流的2.2绝...

网友评论

      本文标题:绝对定位理解

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