CSS位置与浮动


位置:

position

CSS position属性用于指定一个元素在文档中的定位方式。
定位类型

  • 定位元素(positioned element)是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素(换句话说,除static以外的任何东西)。
  • 相对定位元素(relatively positioned element)是计算后位置属性为 relative 的元素。
  • 绝对定位元素(absolutely positioned element)是计算后位置属性为 absolute 或 fixed 的元素。
  • 粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。

取值

  • static:该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
  • relative:该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。top, right, bottom, left等调整元素相对于初始位置的偏移量。
  • absolute:元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
  • fixed:元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
  • sticky:元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

浮动:

float

float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。

由于float意味着使用块布局,它在某些情况下修改display 值的计算值:

  • displayinlineinline-block时,使用float后会统一变成block

取值:

  • left:表明元素必须浮动在其所在的块容器左侧的关键字。
  • right:表明元素必须浮动在其所在的块容器右侧的关键字。

clear

有时,你可能想要强制元素移至任何浮动元素下方。比如说,你可能希望某个段落与浮动元素保持相邻的位置,但又希望这个段落从头开始强制独占一行。此时可以使用clear
取值:

  • left:清除左侧浮动。
  • right:清除右侧浮动。
  • both:清除左右两侧浮动。

以上均出自y总课程


文章作者: FW
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 FW !
评论
  目录