Position属性
-
position属性想必大家都很熟悉了,相对定位、绝对定位、粘性定位、固定定位啊,啊不,没有等等,啊不不不,还有等等,不重要了~
position定位的位移计算方式与父子盒子无关,不同的定位方式,仅影响它相对计算的方式。具体的内容细节我不多说,去文档看吧。我要说的是,position的位移依赖于top、right、bottom、left属性。
position适用于:
all elements except table-column-group and table-column
也就是除了table-column-group和table-column的所有display属性值。和transform的区别就是inline也可以使用position。
相对定位(Relative,Sticky)relative;我们来看下代码:
效果是这样的:
看起来还可以,跟translate的效果是一样的,但是实际上这样做的问题很多,并不适用大多数的实际应用场景,有很大的局限性。当我们切换父子盒子的宽高的时候,只要父盒子的一半减去子盒子的一半等于你设置的宽高,那么就可以实现水平垂直居中的效果。
那么百分比呢?其实百分比也跟translate是类似的。我就不再写了。要注意的是,relative是相对于自己所在位置进行相对位移的。所以,在本例的代码中展现的效果和translate十分类似。
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏