CSS中Position属性的功能-创新互联

这篇文章主要讲解了“CSS中Position属性的功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中Position属性的功能”吧!

创新互联建站服务项目包括郯城网站建设、郯城网站制作、郯城网页制作以及郯城网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,郯城网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到郯城省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

position定位类型

定位元素(positionedelement)是其计算后位置属性为relative,absolute,fixed或sticky的一个元素。

相对定位元素(relativelypositionedelement)是计算后位置属性为relative的元素。

绝对定位元素(absolutelypositionedelement)是计算后位置属性为absolute或fixed的元素。

粘性定位元素(stickilypositionedelement)是计算后位置属性为sticky的元素。

大多数情况下,height和width被设定为auto的绝对定位元素,按其内容大小调整尺寸。但是,被绝对定位的元素可以通过指定top和bottom,保留height未指定(即auto),来填充可用的垂直空间。它们同样可以通过指定left和right并将width指定为auto来填充可用的水平空间。

除了刚刚描述的情况(绝对定位元素填充可用空间):

如果top和bottom都被指定(严格来说,这里指定的值不能为auto),top优先。

如果指定了left和right,当direction设置为ltr(水平书写的中文、英语)时left优先,当direction设置为rtl(阿拉伯语、希伯来语、波斯语由右向左书写)时right优先。

position语法

position属性被指定为从下面的值列表中选择的单个关键字。

取值

static

该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时top,right,bottom,left和z-index属性无效。

relative

该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative对table-*-group,table-row,table-column,table-cell,table-caption元素无效。

absolute

不为元素预留空间,通过指定元素相对于最近的非static定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。

感谢各位的阅读,以上就是“CSS中Position属性的功能”的内容了,经过本文的学习后,相信大家对CSS中Position属性的功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!


本文标题:CSS中Position属性的功能-创新互联
分享网址:http://myzitong.com/article/ceephd.html