幻蓝博客 – 孤月蓝风

追寻互联网科技、Unity开发、AR/VR开发、游戏开发、Web前后端开发等技术。

clear:both 有高度的问题


.clear {clear: both;height: 0;width: 0;margin: 0;padding: 0;border: none;font-size: 0;}


CSS的绝对定位(absolute)与相对定位(relative)


这是一个困扰了我许久的问题,这几天做个人主页的模板,网页头部的东西显示的位置老是错位,例如主标题,副标题,导航等……

导航总是向右偏移了很多,可是当时我还没有给导航加定位,所以就开始找原因了。把CSS一行一行的往上加,看加到哪才出的错。最后找到了问题的根源,是由于主标题写了 float:left 属性。

解决了导航的偏移,但定位还是有些问题,于是去看W3SCHOOL的在线教程。

教程中说:

相对定位:
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。 

绝对定位:
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

看了后大致明白,绝对定位是相对父级元素的定位,原位置将不存在,不占用空间。而相对定位会保留原位置,新位置会覆盖当前位置的元素。

可是,我在 div 标签里面的 div 加上绝对定位后,却是相对浏览器窗口的位置。很郁闷,于是Google了一下,看到说是在父元素没有使用position属性时,将相对窗口定位。之后才恍然大悟,给父元素加上 position:relative 后,一切就正常了,可以进行正常的定位了。 

 

仅以此日志做个记录,免得以后想不起来的时候还要到处找答案。