CSS定位

作者: 码字仓颉 | 来源:发表于2017-12-29 00:10 被阅读0次

CSS定位

定位有三种,分别是相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。

相对定位

  • 相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。
  • 相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。
  • 使用场景:
    • 微调元素
    • 做绝对定位的参考,子绝父相

绝对定位

绝对定位比相对定位更灵活。

  • 脱离标准文档流,所有的标准文档流的性质,绝对定位之后都不遵守了。(绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了)
  • 参考点
    • 绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角
    • 如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角
  • 以盒子为参考点
    • 一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。
    • 要听最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷。
    • 不一定是相对定位,任何定位,都可以作为参考点。子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是,工程上子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。工程上,“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。
    • 绝对定位的儿子,无视参考的那个盒子的padding。
  • 绝对定位的盒子居中问题
    绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。可使用以下方式使之居中。
    left: 50%;
    margin-left: 负的盒子宽度的一半。
    

固定定位

固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。
固定定位脱标!

相关文章

  • css定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • css 定位 浮动

    定位 1 . css 定位:改变元素在页面上的位置2 . css 定位机制:普通流浮动绝对布局3 . css 定位...

  • CSS定位

    CSS定位(Positioning)允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...

  • CSS中的几种定位

    CSS中常用的定位有 普通定位,相对定位 绝对定位、fixed定位 浮动 1、普通定位和相对定位 css中的元素有...

  • CSS 定位

    CSS定位 CSS 定位机制 CSS中一共有三种基本定位机制:普通流、浮动、绝对定位。如果不进行专门指定,所有的标...

  • 图片精灵

    div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css ...

  • 元素定位

    八大定位 Xpath定位 css定位

  • CSS定位与浮动2016/6/12

    CSS 定位 (Positioning) CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 position...

网友评论

      本文标题:CSS定位

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