扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关css中的position属性有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联专注于鹤壁企业网站建设,响应式网站建设,商城网站制作。鹤壁网站建设公司,为鹤壁等地区提供建站服务。全流程按需制作网站，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务
position属性介绍
（1）css中position属性自CSS2起就有了，该属性规定元素的定位类型。所有主流浏览器都支持position属性。
（2）css中position属性的可选值有四个：static、relative、absolute、fixed。下面分别进行介绍。（其实还有个inherit，不过这个是IE特有的，这里就不做讨论）
1，基本介绍
（1）static是默认值。表示没有定位，或者说不算具有定位属性。
（2）如果元素position属性值为static（或者未设position属性），该元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。
2，使用样例
css:
html:
我们不设置元素的postion属性值，那么默认的显示效果如下：
2345截图20180816103058.png
1，基本介绍
（1）relative生成相对定位的元素，相对于其正常位置进行定位。
（2）相对定位完成的过程如下：
首先按默认方式（static）生成一个元素(并且元素像层一样浮动了起来)。
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
2，样例代码
下面代码将文本输入框position设置为relative（相对定位），并且相对于默认的位置向右、向上分别移动15个像素。
css:
div{
width:200px;
height:100px;
background-color:#C9FFFF;
}
input{
position:relative;
left:15px;
top:-15px;
}
html:
关于“css中的position属性有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网