美文网首页
关于position定位

关于position定位

作者: BlueLeaf1 | 来源:发表于2018-07-23 17:56 被阅读0次

介绍position的几种属性

position属性有以下几种:

  • 相对定位(relative)
  • 绝对定位(absolute)
  • 静态定位(static)
  • 固定定位(fixed)

1. 相对定位(relative)

  • 相对定位是相对于原来自己以前在标准流中的位置来移动。relative表现和static一样,除非添加在一个相对定位position:relative元素设置top\right\bottom\left属性才会偏离正常位置。

  • 相对定位不脱离文档流,会继续在标准流中占有一份空间。

  • 由于相对定位不脱离文档流,所以在相对定位中是区分块级元素和行内元素的。

  • 相对定位同一方向的定位熟悉只能有一个(垂直和水平方向).

  • 使用margin/padding等属性会影响到标准流的布局。

  • 相对定位的应用场景:用于对元素进行微调;配合绝对定位来使用。

2. 绝对定位(absolute)

  • 绝对定位和固定定位相似,但是它不是相对于视窗,而是相对于最近的position祖先元素。

  • 如果一个绝对定位的元素有定位流的祖先元素,并且祖先元素也是定位流(相对定位,绝对定位,固定定位),那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点。

  • 如果一个绝对定位的元素有祖先元素,并且祖先元素中有多个元素都是定位流,那么这个绝对定位的元素就会以离他最近的那个定位流的祖先元素为参考点。

  • 如果绝对定位元素没有定位流祖先元素,那么它是相对于文档的body元素定位,并且会随着页面的滚动而移动。

  • 注意的是一个position元素指的是(绝对定位、相对定位、静态定位),不包括固定定位。

  • 绝对定位的元素是脱离标准流的。

  • 在企业开发中一般不单独使用相对定位和绝对定位,而是结合一起使用。一般“子绝父相”,即子元素用绝对定位,父元素用相对定位。但凡说到定位或一个盒子覆盖在另一个盒子上都要想到“子绝父相”。

3. 静态定位(static)

static是默认值,表示不会被特殊定位。

4. 固定定位(fixed)

  1. 固定定位position:fixed相对于视窗来定位,也就是说元素不会随着页面滚动而发生变化,元素还是停留在原来位置。

  2. 可以使用top\right\bottom\left属性

  3. 固定定位的元素是脱离标准流的,不会占用标准流的空间。

相关文章

  • 关于position定位

    介绍position的几种属性 position属性有以下几种: 相对定位(relative) 绝对定位(abso...

  • 关于position定位

    介绍position的几种属性 position属性有以下几种: 相对定位(relative) 绝对定位(abso...

  • 关于CSS定位

    在CSS中关于定位的内容是:position:relative(相对定位)absolute(绝对定位) ...

  • css样式

    静态定位:position:staic 相对定位:position:relitive 绝对定位:position:...

  • Html>(定位)position

    position:relative(相对定位) position:relative; 相对定位 position...

  • 2018-04-22

    position:relative相对定位 position:absolute绝对定位 position:fixe...

  • HTML/CSS 07-定位属性/锚点/透明

    一、position定位 1.position定位属性:检索对象的定位方式 语法: position: stati...

  • css相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static --...

  • 关于CSS Position(定位)

    在CSS中,我们是通过position定位属性来进行定位的,它有如下几个属性值。常见的属性有如下几个: absol...

  • css样式基础(布局&浮动)

    定位属性:position position: static:默认 relative:相对定位 ...

网友评论

      本文标题:关于position定位

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