美文网首页
CSS基础知识之position

CSS基础知识之position

作者: shinoo | 来源:发表于2016-09-21 10:52 被阅读0次

说到CSS中的复杂布局,那就不得不说position了。

position的各种值会产生什么样的效果,下面会详细说明。

static

static是position的默认值。所以position:static并不会被特殊定位。

static

relative

relative表现和static一样,当然排除了你可能添加了一些额外的属性。在一个position属性上设置了relative
元素上设置toprightbottom、和left(向设置的方向远离)的属性会使其偏离正常位置,其他元素不会补齐因位移产生的空白。

relative

absolute

absolute是一个非常有意思的position值。如果设置了绝对定位的元素element1的外层没有设置了relative或者absolute的爹元素,爷爷元素,或者祖宗元素。那么这个element1的元素就是相对于文档的body元素。

absolute

fixed

fixed是一个固定定位,这个元素会相对视窗来定位,所以就算页面滚动,它还是会留在相同位置。和relative一样,top、right、bottom和left属性都可用。
这个例子就不上图了,因为不滚动页面也看不出来。

相关文章

  • 好程序员web前端培训之CSS基础知识之position

    好程序员web前端培训之CSS基础知识之position CSS定位机制 标准文档流(Normal flow) 浮...

  • CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中...

  • CSS基础知识之position

    说到CSS中的复杂布局,那就不得不说position了。 position的各种值会产生什么样的效果,下面会详细说...

  • CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正...

  • CSS之Position

    CSS2.0之后添加了Position,定位属性,主要包括四种 static:保持元素所在文档中的位置元素框正常生...

  • 2017-12-30

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

  • CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而...

  • CSS属性之position

    todo

  • css之定位(position)

    相对定位——relative 绝对定位——absolute 默认值——static 固定地位——fixed 定位:...

  • css定位之position

    以下是我对position属性的了解和总结。 position:static;position的默认属性,元素框会...

网友评论

      本文标题:CSS基础知识之position

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