成都创新互联网站制作重庆分公司

css中的position属性有哪些

这篇文章将为大家详细讲解有关css中的position属性有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联专注于鹤壁企业网站建设,响应式网站建设,商城网站制作。鹤壁网站建设公司,为鹤壁等地区提供建站服务。全流程按需制作网站,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

position属性介绍

(1)css中position属性自CSS2起就有了,该属性规定元素的定位类型。所有主流浏览器都支持position属性。

(2)css中position属性的可选值有四个:static、relative、absolute、fixed。下面分别进行介绍。(其实还有个inherit,不过这个是IE特有的,这里就不做讨论)

position:static(默认值)

1,基本介绍

(1)static是默认值。表示没有定位,或者说不算具有定位属性。

(2)如果元素position属性值为static(或者未设position属性),该元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。

2,使用样例

css:

html:

我们不设置元素的postion属性值,那么默认的显示效果如下:

2345截图20180816103058.png

position:relative(相对定位)

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属性有哪些css中的position属性有哪些

关于“css中的position属性有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


标题名称:css中的position属性有哪些
文章URL:http://cxhlcq.com/article/igieoi.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部