Position 的四种属性值

您所在的位置:网站首页 css中position属性值的区别 Position 的四种属性值

Position 的四种属性值

2024-07-12 00:31| 来源: 网络整理| 查看: 265

   Position和float这两个元素属性非常重要;今天主要来看一看position在定中的作用。

首先Position有四个属性值,分别是static 、fixed、 relative 、absolute。

第一个属性值是static,这是position的默认属性,一般我们都不会用到他,所以也很少提到他,但是在特殊的情况下,他又有着不可替代的作用,比如,在媒体查询页面当中,正常页面当中需要给元素加position属性,但是在响应式页面中不需要,这是就只能用position:static;没有position:none;的写法,网页也不会识别。

第二个属性fixed——固定定位,fixed是相对于window窗口的定位,一般在网页中也会经常看到,例如置顶,等

置顶

 .box1{   height: 2000px;   width:10px;  } .pink{ height: 100px; width: 100px; background:pink; position: fixed; bottom: 20px; right: 100px; }

如图中所示,无论滚动条怎么滑动上图的滚动条,div-pink都不会改变自己在窗口的位置;

第三个属性值relative——相对定位;相对于自己本身的定位;这个定位一般是和absolute属性值一起用;相对定位不会破坏元素的文本流,但是会改变元素的视觉效果

第四个属性值absolute——绝对定位;相对于父级元素的定位,如果没有父级元素时相对于窗口的定位;

需要注意的是static relative这两个属性值是不会破坏元素的文本属性;但是fixed 和 abosulte则会改变元素的文本流,有float的效果。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3