在CSS中position这个属性,
他的语法是:
position:static|fixed|relative|absolute;
定位:静止|固定|相对|绝对;
(这个是我为英语不好的同学准备的,和上面是一一对应的哦。)
有的朋友问我,现在编程什么语言最火是java还是python,我说最重要你还是先学好英文语言吧。
现在我就和大家仔细说说每一个定位的意义。
position:static(默认定位)
默认定位呢,就是没有定位属性没有任何值的时候,一般都不需要写啦。
1、遵循HTML的排版规则,从上到下,块级元素换行,行内元素在同一行等等原则。
2、遵循正常文档流。
3、top、botton、left、right对这个不起作用。
position:fixed(固定定位)
1、相对也浏览器窗口进行定位。
2、脱离正常文档流。
3、常用的应用场景就是浏览器右下角的脚标、浏览器两边的广告,拉动滚动条,他不会跟着动,而是相对于页面固定。
4、用top、botton、left、right对位置进行设置。
position:relative(相对定位)
说了那么多终于回到这个标题了,以前一直没弄清楚,模棱两可,今天终于弄清楚了,爱自己哦。
1、相对定位是相对于自己定位,那自己又是什么位置,又是我前面提到遵循HTML的排版规则的位置。
2、遵循正常文档流。
3、用top、botton、left、right对位置进行设置。
position:absolute(绝对定位)
说是绝对定位,其实他需要有一个已经定位的父元素(除去static定位的,其他定位类型)。
1、绝对定位会找到一个已经定位的父元素(除static)或者祖先元素。如果没有已经定位的,那么就会相对于定位。
2、脱离正常文档流。
3、用top、botton、left、right对位置进行设置。
什么是文档流?
讲窗体自上而下分成一行行,块级元素换行,行内元素在同一行每行中按照从左至右的顺序排放元素,即为文档流。
温馨提示:
使用top,就不要使用bottom,同时使用的话执行top。
使用left,就不要使用right,同时使用的话执行left。
代码冗余没什么必要。
还有其他问题,就不全部写了,自己实践最重要。