重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何在css中设置position属性值

这篇文章将为大家详细讲解有关如何在css中设置position属性值，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联建站长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为黄山区企业提供专业的成都做网站、网站设计，黄山区网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

首先是不设置position属性，可以看到two元素的top的属性并未生效，而颜色属性是有效的，当前位置是默认文档流中的位置，以此为原型对比position改变时的元素位置的变化。

One

Two

Three

Four

.box {
    display: inline-block;

    background: red;
    color: white;
  }
  
  #two {
    top: 260px;
    bottom: 126px;
    left: 20px;
    background: blue;
  }

如何在css中设置position属性值

position：static

在#two的类下添加position：static;如下（后面每处只修改position的值）

#two {
    position:static;
    top: 260px;
    bottom: 126px;
    left: 20px;
    background: blue;
  }

如何在css中设置position属性值

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

这个值既然会使定位属性失效，那么它存在的意义是什么的？

在网页样式修改的过程中，可以暂时的屏蔽某些元素的位置信息，或者在修改的时候，保留，某些部分的位置信息，便于恢复。

position：relative

相对定位，相对与原来正常文档流的位置定位，但是在定位时不改变原来的页面布局，既是相当于只是把定位的元素进行了移动，而移动的对比标准位置就是正常文档流中的位置，而原来的位置会留白。

如何在css中设置position属性值

position ：absolute

绝对定位，该元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。他相对于最近已定位的父元素定位。例子中即是根据body元素来定位的。

如何在css中设置position属性值

position ：fixed

固定定位，所谓固定定位和绝对定位相似，一样都会从普通文档流中删除，并且不会为页面布局中的元素创建空间；不一样的是它是固定在视窗上的，是以视窗为定位对象的的，相信大家浏览很多网页时都有这样的感受，网页上部或者下部会有广告不会随着网页的上下滚动而移动，它们是固定在网页上的，并且如果没有设置z-index来修该叠放次序，它们会覆盖网页的内容。

如何在css中设置position属性值