首页 > 代码库 > position定位的解析与理解
position定位的解析与理解
每当我们在制作页面布局的时候总会遇到各种各样的让元素进行移动的时候,我们要不就是用margin属性来使元素进行移动,要不就是用position定位来进行,下面我就说下position定位的使用以及注意事项。
我们常用的position它有4种值,分别是 static relative absolute fixed。
static它是position的默认值:
给代码添加和不添加没有任何的不同,它是没有任何定位于效果的,也不会脱离文档流。
relative是position的相对定位:
它是相对自身在文档流的位置来进行定位的;但元素仍在文档流中。我们可以通过left、top、right、和bottom的CSS规则来调整元素所在的位置。
absolute是position的绝对定位:
它是相对于定位不是static的最近一级的父元素来进行定位的;被定位的元素会脱离文档流。在绝对定位中我们也可以通过left、top、right、和bottom的CSS规则来调整元素所在的位置。它所要注意的是:
1、我们在给元素添加position:absolute;属性是它是不会脱离文档流的,而我们一旦通过left、top、right、和bottom来给元素调整位置的时候它便会脱离文档流。
2、给元素添加position:absolute;属性,而元素的父辈元素中没有进行任何定位的时候,它所定位的位置是相对于body元素来进行的。
fixed是position的固定定位:
从字面上就可以看出来它是固定的定位,它是相对于浏览器的窗口或frame来进行定位的,它是脱离文档流的。它可以通过left、top、right、和bottom来对元素调整它所在浏览器中的位置。
通常我们可以用他来做页面布局的导航部分与底部,还可以用它来做网页中的插入广告与商业推广,但我们在使用它的时候尽量使用在页面布局的尾部,因为这样在元素脱离文档流的时候不会对整个页面的布局造成影响。
在告诉大家一个小知识点:
当我们使用left、top、right、和bottom对元素调整的时候我们也可以使用百分比的。
说完了position的定位属性,那么我在来说下我在页面制作过程中所遇到的一个问题。
我在页面的制作过程中经常遇到子元素继承了父元素的定位样式导致子元素不能够浮动,对于这个问题我的解决方法是直接在子元素中写style样式,通过优先级的选择来解决这个问题,我希望有更好办法的朋友能给我解惑下。感谢大家的阅读,这就是我对position属性的理解。
position定位的解析与理解